Django框架(三十)—— 使用Vue搭建前台
vue的使用
[TOC]
一、创建vue项目
参考另一篇随笔:https://www.cnblogs.com/linagcheng/p/9883014.html
1.安装node.js
2.vue脚手架
3.vue create 项目名字
二、pycharm开发vue项目
1、安装vue.js插件
setting ---> plugins ---> 左下方install ----> 搜索vue.js ----> 下载 ---> 重启
2、运行vue项目
运行按钮旁边的editconfigration ---> + ---> npm ---> 右侧 Command:run;Script:serve
三、vue项目的目录结构
assets:静态资源
components:组件,存放页面中小的页面
views:视图组件,基本存放大型的页面
APP.vue:根组件
main.js :总的入口js
router.js :路由相关,所有路由的配置,在这里面
store.js :vuex状态管理器
package.json : 项目依赖的文件
注意:
- node_modules 项目依赖文件很多,所有拷贝vue项目时,可以不拷贝,通过
npm install
参考package.json
文件直接下载项目依赖 - 将项目传到Git上,依赖文件不要传
- 每个组件有三部分
- template
- style
- script
- template
四、vue的使用
1、创建新的组件
(1)手动创建一个组件,如 index.vue
(2)去路由中配置
import Index from './views/Index.vue'
routes:[
{
path: '/index',
name: 'index',
component: Index
},
]
(3)使用组件
<router-link to="/index">index页面</router-link>
2、显示数据
<template>
<div>
{{ course }}
<p>
{{ name }}
</p>
<!--for循环-->
<p v-for=" course in courses">
{{ course }}
</p>
</div>
</template>
<script>
export default {
data: function () {
// 返回数据,template可以通过name获取
return {
courses: ['python', 'linux'],
name: 'tom'
}
},
}
</script>
3、方法的绑定
<template>
<button @click="test">点我</button>
</template>
<script>
export default {
methods: {
test: function () {
this.course=['aaa','ddd','bbb']
}
}
}
</script>
五、axios
1、安装axios
npm install axios
2、使用axios
(1)在mian.js中配置
// 导入axios
import axios from 'axios'
// 要把axios放到一个全局变量中
// 把axios赋给了$http这个变量
Vue.prototype.$http = axios
(2)在组件中使用
this.$http.request().then().catch()
this.$http.request({
url:请求的地址
method:请求方式
}).then(function(response){
....函数回调处理
})
methods: {
init: function () {
//this.$http 就是axios
// $.ajax({
// url:'',
// type:'post',
// success:function(){}
// })
let _this=this // this需要在上面重新赋值给一个变量
this.$http.request({
// 在mian.js中配置,_this.$url='http://127.0.0.1:8000/'
url:_this.$url+'course/',
method:'get'
}).then(function (response) {
//console.log(response)
//服务端返回的数据
console.log(response.data)
_this.course = response.data
}).catch(function (response) {
console.log(response)
})
},
}
六、vue绑定
1、绑定图片
<img :src="img">
2、绑定事件
<span @click="init(params)"></span>
3、绑定路由
<a :to="/login"></a>
七、vue页面挂载
<script>
export default {
methods: {
test: function () {
this.course=['aaa','ddd','bbb']
}
},
// 页面挂载是执行
mounted:function(){
// test是methods中定义的方法
this.test()
}
}
</script>
八、vue中路由携带参数
- 路由的名字写在
name
对应的value值,参数写在params
对应的value中(可以为一个字典)
<router-link :to="{'name':'courseDetail','params':{'id':course.id}}">详情</router-link>
- 前台从路由中获取值,从
this.$route.params
中取
// 如获取course_id
this.$route.params.id
九、vuex(状态管理器)
1、作用
用来存储cookie信息
2、配置vuex
在main.js中配置
new Vue({
router,
store, // 配置vuex
render: h => h(App)
})
3、使用
// 赋值
this.$store.state.name = this.name
// 取值
this.$store.state.name
十、vue-cookies——管理cookie
1、安装vue-cookies
npm install vue-cookies
2、使用
// store.js中
import Cookie from 'vue-cookies'
Vue.use(Vuex)
export default new Vuex.Store({
// 变量
state: {
name: Cookie.get('name'), // 从cookie中获取值
token: Cookie.get('token')
},
// 方法
mutations: {
login: function (state, response) {
//修改这两个变量的值
state.name = response.data.name
state.token = response.data.token
// 往cookie中写数据
Cookie.set('name', response.data.name)
Cookie.set('token', response.data.token)
},
logout: function (state) {
// 修改这两个变量的值
state.name = ""
state.token = ""
// 往cookie中写数据
Cookie.set('name', "")
Cookie.set('token', "")
}
},
actions: {}
})
// Login.vue页面
methods: {
login: function () {
let _this = this
this.$http.request({
url: _this.$url + 'login/',
method: 'post',
data: {'name': _this.name, 'pwd': _this.pwd}
}).then(function (response) {
console.log(response.data)
if (response.data.status == 100) {
//往stort.js的state的字典中写入值
// _this.$store.state.name=_this.name
// _this.$store.state.token=response.data.token
//调用store下的某个方法,用commit,第一个参数是方法名,第二个参数是参数
_this.$store.commit('login', response)
}
}).catch(function (response) {
console.log(response)
})
},
},
Django框架(三十)—— 使用Vue搭建前台的更多相关文章
- Django框架(十)--ORM多对多关联关系三种创建方式、form组件
多对多的三种创建方式 1.全自动(就是平常我们创建表多对多关系的方式) class Book(models.Model): title = models.CharField(max_length=32 ...
- Django框架(十二)—— 补充:inclusion_tag、defer、only、choice、事务、创建多对多的第三张表
目录 补充:inclusion_tag.defer.only.choice.事务.创建多对多的第三张表 一.inclusion_tag 1.作用 2.使用 二.defer与only 1.定义 2.使用 ...
- Django框架(十八)—— CBV源码分析、restful规范、restframework框架
目录 CBV源码分析.restful规范.restframework框架 一.CBV源码分析 1.url层的使用CBV 2.as_view方法 3.view方法 4.dispatch方法(可以在视图层 ...
- Django框架(三) 复习总结与路由控制
知识点回顾 MTV模型 model:模型,和数据库相关的 template:模板,存放html文件,模板语法(目的是将变量如何巧妙的嵌入到HTML页面中). views:视图函数 另加urls:url ...
- Django框架(十九)--Django rest_framework-认证组件
一.什么是认证 只有认证通过的用户才能访问指定的url地址,比如:查询课程信息,需要登录之后才能查看,没有登录,就不能查看,这时候需要用到认证组件 二.利用token记录认证过的用户 1.什么是tok ...
- Django框架(十四)-- forms组件、局部钩子、全局钩子
一.什么是forms组件 forms组件就是一个类,可以检测前端传来的数据,是否合法. 例如,前端传来的邮箱数据,判断邮件格式对不对,用户名中不能以什么开头,等等 二.forms组件的使用 1.使用语 ...
- Django框架(十二)-- 中间件、CSRF跨站请求伪造
中间件 一.什么是中间件 请求的时候需要先经过中间件才能到达django后端(urls,views,templates,models) 响应的时候也需要经过中间件才能到达web服务网关接口 djang ...
- Django框架(十五)—— forms组件、局部钩子、全局钩子
目录 forms组件.局部钩子.全局钩子 一.什么是forms组件 二.forms组件的使用 1.使用语法 2.组件的参数 3.注意点 三.渲染模板 四.渲染错误信息 五.局部钩子 1.什么是局部钩子 ...
- Django框架(十四)—— Django分页组件
目录 Django分页组件 一.分页器 二.分页器的使用 三.案例 1.模板层 2.视图层 Django分页组件 一.分页器 数据量大的话,可以分页获取,查看 例如:图书管理中,如果有成千上万本书,要 ...
随机推荐
- 我的WordPress站点
读取VDI文件 SSL和TLS Windows下使用vim的最佳方案:Sublime gdb用法 VMware的Guest与Host进行通信的三种方式 加密与解密 漫谈保护模式 processing学 ...
- Unity中文本AssetBundle的解析
Unity在其安装目录下提供了许多实用的小工具,就存放在unity安装目录下的:Editor/Data/Tools, 其中该路径下的WebExtract.ext和binary2text.exe可以用 ...
- python-form表单
form表单 form属于块级标签 功能: 表单用于向服务器传输数据,从而实现用户与web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等 表单还可以包含tex ...
- 设置xampp开机自动启动
l 设置xampp开机自动启动: 1)vi /etc/init.d/xampp.sh 增加:#!/bin/sh /opt/lampp/lampp start 2)vi /etc/rc.d/r ...
- Spring Boot & Redis 用起来真简单!
作者:java_老男孩 https://blog.51cto.com/14230003/2368721 Redis 是目前业界使用最广泛的内存数据存储.相比 Memcached,Redis 支持更丰 ...
- Memory layout of x86_64 in Linux
Blue : User Space 128TBRed : Kernel Space 512MBThe rest of the address space goes to various parts o ...
- 重读ORB_SLAM之Tracking线程难点
1. 初始化 当获取第一帧图像与深度图后,首先设置第一帧位姿为4*4单位矩阵,然后为整个map添加关键帧与地图点.且更新地图点与关键帧的联系,例如地图点被哪个关键帧观测到,而此关键帧又包含哪些地图点. ...
- android sdcard保存文件
- flask开发问题小记
前因 最近在使用flask开发一个APP的后端时出现了一些小问题.我使用sqlalchemy建立了如下多对多关系: 中间表 user_manager_group = db.Table('manage_ ...
- 绘图matplotlib
前言 matplotlib是python的一个绘图库,如果你没有绘制过图,可以先试试js的绘图库http://www.runoob.com/highcharts/highcharts-line-lab ...