一、Vue执行流程
1、vue的执行流程
# 1 为什么浏览器中访问某个地址,会显示某个页面组件 -根组件:App.vue 必须是 <template> <div id="app"> <router-view></router-view> </div> </template> -1 配置路由 router----》index.js---》const routes = [ { path: '/lqz', name: 'lqz', component: Lqz # 组件,需要导入 }, ] -2 放心大胆的写页面组件 -src---->views文件夹 # 2 在页面组件中使用小组件 -1 写一个小组件,我们写了个Child.vue -2 在父组件中,导入组件 # @ 代指src路径 import Child from "@/components/Child"; -3 父组件中,注册组件 components: { Child } -4 父组件中使用组件 <Child :msg="msg" @myevent="handleEvent"></Child> -5 自定义属性,自定义事件,插槽,跟之前一模一样
二、登录小案例
1、解决跨域问题、安装axios
# 1 登录页面:LoginView.vue # 2 访问/login 显示这个页面组件 # 3 在LoginView.vue写html,和js,axios -安装 axios -cnpm install -S axios # 把安装的axios放到package.json中 # 4 写ajax,向后端发送请求,给按钮绑定两个一个事件 #安装axios,导入axios handleSubmit() { console.log(this.name, this.password) axios.post('http://127.0.0.1:8000/login/', { name: this.name, password: this.password }).then(res => { // console.log(res.data) if (res.data.code == 100) { //跳转到百度 location.href = 'http://www.baidu.com' } else { alert(res.data.msg) } }) } # 4 写个后端的登录接口,处理好跨域问题,处理跨域如下 ####解决后端跨域问题##### 1 安装 pip3.8 install django-cors-headers 2 注册app INSTALLED_APPS = ( ... 'corsheaders', ... ) 3 配置中间件 MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', ... ] 4 配置文件中加入:setting下面添加下面的配置 CORS_ORIGIN_ALLOW_ALL = True CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) CORS_ALLOW_HEADERS = ( 'XMLHttpRequest', 'X_FILENAME', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', 'Pragma', 'token' )
2、后端
import json def login(request): data = json.loads(request.body) if request.method == 'POST': print(data) name = data.get('name') password = data.get('password') if name == 'ccy' and password == '123': print(name, password) return JsonResponse({'code': 200, 'msg': '登录成功!'}) else: return JsonResponse({'code': 400, 'msg': '登录失败!'})
注意这里的密码,前端传过去是字符串
3、前端
## views <template> <div> <p>用户名: <input type="text" v-model="name"> </p> <p>密码: <input type="password" v-model="password"></p> <button @click="handleSubmit">登录</button> </div> </template> <script> import axios from 'axios'; export default { name: "LoginView", data () { return { name: '', password: '' } }, methods: { handleSubmit(){ console.log(this.name, this.password) axios.post('http://127.0.0.1:8000/login/',{ name: this.name, password: this.password }).then(res => { console.log(res.data.name, res.data.password) if (res.data.code === 200){ location.href = 'https://www.cnblogs.com/' }else { alert(res.data.msg) } }) } } } </script> <style scoped> </style> ## router import LoginView from "@/views/LoginView"; { path: '/login', name: 'login', component: LoginView },
三、scoped、props、ref、混入
四、插件
五、elementui