axios是前端负责吗写吗

Posted 2023-04-26

参考技术A 不负责。
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。

vue实战

vue是目前比较火的一个前端单页框架，简单容易上手
一个简化版的项目只需要4个组件即可
vue + vue-router + vuex + axios
vue：自身负责全盘内容
vue-router：负责页面的切换
vuex：负责全局的变量的存储和读取
axios：负责和api服务器进行rest接口的交互
以下的内容需要有一定前端基础才方便理解

前序步骤：使用webpack打包模式来开发vue，没有直接使用引入vue文件的方式来开发，需要安装nodejs，vue-cli
nodejs是运行测试环境的基础
vue-cli是使用模板创建vue项目的工具
1：安装成功后初始化项目：vue init webpack myproject

一个vue文件主要包含三个部分，模板，js，css
<template>
</template>
<script>
</script>
<style>
</style>
template部分是存放html代码的地方，只有一个根元素，可以用div来包裹起来
script是js脚本的地方，一般以export default {}的形式出现，具体vue的js代码都写在大括号里面
style是写css的地方，支持scss和sass，但scss是主推使用。

在template里面主要常用的两个内容，都是在export default {}里面的内容，一个是data数据，一个是method方法。
data () {
return {
myDataName:‘‘,
myValue:‘‘
}
}
使用的方式有两种，一种是属于content类的的，不是html的元素，使用的是{{myDataName}};另外一种是属于在html元素属性里的，需要使用v-bind:或者缩写:的形式才能使用，并且不需要使用大括号，例如
<input :value="myValue"> //缩写
<input v-bind:value="myValue"> //全写
#双向绑定
这个是单向的，即只能从js修改后在页面显示
如果需要双向的（即页面上更改的值会引发js里的值更改）需要使用v-model:value="myValue"，这样input的值修改会让js里对应的变量一个更改

条件渲染：
<h1 v-if="表达式">内容</h1>
<h1 v-else>内容</h1>
v-el-if="表达式"
<template v-if="表达式">
内容
</template>

列表渲染：
<template v-for="item in items">
<p>{{item}}</p>
</template>

-
script里面的常见的内容有：

    <script>
        export default {
                el:‘‘#myId‘   ：
            data:{}//数据
            methods:{}//绑定的方法
            created:function(){}//生命周期事件，function里面this 指向vue实例，还有mounted，updated，destroyed都是生命周期事件
            filters:{}//定义过滤器
            watch:{}//定义需要跟踪的属性和执行的事件
            components:{}//注册局部组件
        }
        </script>

事件绑定

使用v-on:或者缩写@，例如绑定点击事件@click="myMethodName"
br/>v-on:click="myMethodName"
@click="myMethodName"
myMethodName需要在methods里面声明

生命周期回调方法

会在这个vue组件的生命周期里触发，常用的有
created，mounted，beforeCreated等

过滤器

用来对数据进行再一次处理，比使用methods里的方法书写更为简洁直观，需要在filters中先声明一个方法，然后在template里面使用
{{属性名 | 过滤器名}}
可以多个过滤器串联：{{属性名 | 过滤器1 | 过滤器2}}

计算属性

在template使用，和data里的值使用类似，但computed属性可以再执行一些内容。

使用子组件

使用子组件的方式可以让代码更好的复用，即一个子组件可以在多个vue文件中直接引用使用。
1：在父组件中先引入子组件的vue文件
import MyComp from ‘./mycomp.vue‘
2：在父组件的声明的compentents中添加MyComp
componetents: {MyComp}
3：在父组件中使用
<MyComp/> 这里的名字需要和componentns里的一致，否则会出现找不到组件的提示
4：给子组件传值，vue设定传值只能是单向的，子组件不能直接对父组件传进来的值进行修改
<MyComp :myPropName="fatherDataName"/>
5：在子组件中声明props来接收父组件传入的值
props:[‘myPropName‘] 这个方式不是推荐的写法，这里不详细叙述。

当需要在子组件更改父组件的值时：通过事件进行传递
1：在父组件里
<MyComp v-on:myEventName="fatherMethod"/>
methods: {
fatherMethod (myData) {}
}
2：在子组件的方法中使用
this.$emit(‘myEventName‘, data)

使用slot来进行动态更改组件里的内容

当组件里部分内容需要动态更改时，可以使用slot标签
1：在子组件里需要替换内容的地方书写<slot></slot>
2：在父组件引用子组件的地方：
<MyComp>
<div>这里是替换的内容</div>
</MyComp>

vue-router：

因为是单页应用，所以location里的地址前缀不会更改，更改是后缀，默认使用#来分隔，此时router可以对路径进行划分，然后显示对应的组件内容
1：在声明vue实例的地方引入vue-router，然后构造一个带有页面地址和组件的router对象，插入进vue实例里面即可
2：在模板需要使用路由内容的地方写上<route-view/>
const router = new VueRouter({
routes: [
{ path: ‘/user/:id‘, component:MyComponent}
]
})
路由里还有路由守卫，用来控制能否跳转显示，多用于权限控制

vuex：用来保存全局变量，主要有

state：主要存储变量的地方
action：用作异步更改state
mutation：用作同步更改state
getter：用来读取state，同时可以做一些操作，和计算属性类似
...mappedStated方法：用来全部绑定state里的值到组件的计算属性中，简化书写代码。
const store = new Vuex.Store({
state:{},
actions:{},
mutations:{},
getters:{}
})
还可以对全局变量进行分模块管理，这里不详细叙述

axios2 ：用作异步请求api

如果不使用中转的，则需要api使用跨域设置，否则会报调用错误
使用JWT的方式进行api的调用。

部署

项目开发完成后，使用npm run build即可打包出一份静态页面代码
此时这份代码可以直接部署在nginx上，调用的api地址如果不进行跨域，则在nginx上配置一下转发即可。

源码可以到
https://github.com/18588733917
上查看