目录
Vue插件
1. vuex
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
Vuex工作流程图如下
state：存数据的地址
actions：服务员，中转站
mutations：厨师，真正改state数据的地方
# 工作原理
1.在state中定义变量
2.在组件中通过this.$store.dispatch('actions中定义的函数')，触发actions中得函数执行
3.在actions中得函数中，调用 context.commit('mutations中定义的函数')
4.在mutations中定义的函数实现真正的修改state中得数据
5.页面中只要使用$store.state.变量，变量变化，页面就变化 实现了组件间通信
6.注意：
-在组件中可以直接调用commit触发【mutations中定义的函数】
-在组件中可以直接修改state中定义变量
vue使用步骤
1.安装
cnpm install vuex
2.新建store/index.js，在index.js中
export default new Vuex.Store({
state: {
// 放数据
},
mutations: {
//放方法，正常是让acitons中来调用
// 组件也可以直接调用
},
actions: {
// 放方法，正常组件调用
},
})
3.在组件中
// 如何显示state的变量
html中----{{$store.state.变量名}}
js中------this.$store.state.变量名
//如何修改state中的值
正常修改---this.$store.dispatch('actions中的方法',参数)---》actions中的方法调用context.commit('mutations',参数)---》在mutations中直接修改state的值
简易版-----this.$store.commit()-- this.$store.state.变量名
2. vue router
官方提供的用来实现SPA 的vue 插件，可以写很多页面组件，通过地址栏不同的路径显示不同的页面组件
vue router官网
基本使用
# 如果没有要提前下载
1 新建router/index.js
const routes = [配置路由1,配置路由2]
2 main.js中使用：之前已经写好了
import router from './router'
new Vue({
...
router,
...
}).$mount('#app')
3 只需要写页面组件，配置路由即可
# 路由
const routes = [
{
path: '/',
name: 'home',
component: Child
},
]
4 在App.vue中加入
<router-view> // 用来显示当前路由组件界面
</router-view>
5 在浏览器访问const routes中配置的路径，就能看到对应的页面组件了
路由的跳转
# <router-link> 跳转用
# <router-view/> 替换页面组件用
1.在html中使用
<router-link :to="path">
<button>点我跳转到home页面</button>
</router-link>
2.在js中使用
this.$router.push('goods')
router-link的replace属性：是控制路由跳转操作浏览器历史记录的模式
路由跳转携带参数
# 两种情况
-带在请求地址中以 ?name=kiki&age=19
-在地址中类似于django的分组 /books/1/
# 情况1：请求地址中
-<router-link to="/login/?name=kiki&age=19">去登录</router-link>
-组件中接受：this.$route.query.pk
# 情况2：地址中/course/1/
<router-link to="/login/lyf">去登录</router-link>
router/index中路径得改
{
path: '/login/:id',
name: 'login',
component: Login
},
-组件中接受：this.$route.params.id
#4 区分this.$route this.$router
this.$router # new VueRouter对象，实例，可以实现路由的跳转
this.$route # 是当前路由对象，内部有传入的参数
两种跳转方式---使用对象方式
this.$router.push({
name: 'login',
// query: {
// name: 'kiki',
// age: 19
// },
params: {
id: 88
}
}) # 这里可以写个对象
标签形式跳转，传对象形式
<router-link :to="{name: 'login', query: {name: 'lqz'}, params: {id: 999}}">
<button>点我跳转到home页面</button>
</router-link>
相关API
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由
路由守卫
作用：对路由进行权限控制
全局守卫
- 前置路由守卫：在进路由前，执行代码
- 后置路由守卫：路由跳转走，执行代码
如何用：router/index.js 加入
// 全局前置路由守卫--->任意路由跳转都会触发它的执行
// 前置路由守卫
router.beforeEach((to, from, next) => {
console.log('前置路由守卫', to, from)
if (to.name == 'shoppingcart') {
let name = localStorage.getItem('name')
if (name) {
next()
} else {
alert('不好意思没有权限')
}
} else {
next()
}
})
// 后置路由守卫
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.name
})
// to 是去哪，哪个路由对象
// from 是来自哪，是哪个路由对象 比如从 /--->/login
// next 是函数，如果加括号执行，就会真正的过去
3. vue-cookies
// 安装cookie的命令
// npm install vue-cookies --save
// 为项目配置全局vue-cookie
import VueCookies from 'vue-cookies'
// 将插件设置给Vue原型,作为全局的属性,在任何地方都可以通过this.$cookie进行访问
Vue.prototype.$cookies = VueCookies
// 持久化存储val的值到cookie中
this.$cookies.set('val', this.val, 300)
// 获取cookie中val字段值
this.$cookies.get('val')
// 删除cookie键值对
this.$cookies.remove('val')
4. axios
import axios from 'axios' // 安装的模块不用加相对路径
axios.get().then()
// 安装 axios(ajax)的命令
// npm install axios--save
// 为项目配置全局axios
import Axios from 'axios'
Vue.prototype.$ajax = Axios
let _this = this
this.$ajax({
method: 'post',
url: 'http://127.0.0.1:5000/loginAction',
params: {
usr: this.usr,
ps: this.ps
}
}).then(function(res) {
// this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向
// 要更新页面的title变量,title属于vue实例
// res为回调的对象,该对象的data属性就是后台返回的数据
_this.title = res.data
}).catch(function(err) {
window.console.log(err)
})
# 用pycharm启动该文件模拟后台
from flask import Flask, request, render_template
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
@app.route('/')
def index():
return "<h1>主页</h1>"
@app.route('/loginAction', methods=['GET', 'POST'])
def test_action():
# print(request.args)
# print(request.form)
# print(request.values)
usr = request.args['usr']
ps = request.args['ps']
if usr != 'abc' or ps != '123':
return 'login failed'
return 'login success'
if __name__ == '__main__':
app.run()