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分页组件 一.分页器 数据量大的话,可以分页获取,查看 例如:图书管理中,如果有成千上万本书,要 ...
随机推荐
- spring boot 尚桂谷学习笔记07 嵌入式容器 ---Web
------配置嵌入式servlet容器------ springboot 默认使用的是嵌入的Servlet(tomcat)容器 问题? 1)如何定制修改Servlet容器的相关配置: 1.修改和se ...
- eclipse搭建jmeter编译环境(Jmeter二次开发)
jmeter是开源项目,方便大家对代码进行改动. 写了一个简单教程,帮助入门者进行搭建jmeter编译环境! 下载地址 文件格式为zip,解压后为docx微软office2007文档. 或者直接访问我 ...
- 如何让Jmeter压力测试减少压力机的资源消耗
如下是官方的一些建议: 1. 使用非gui模式,例如 jmeter -n -t test.jmx -l test.jtl 2. 尽量用较少的监听器(listeners):如果使用了-l 标致像上面一样 ...
- vue - blog开发学习6
1.问题,如下图,使用iviewui中的card导致页面不能出现滚动条(不太会弄,在网上查了一个vue组件vuescroll,因此使用这个做滚动条) 2.安装vuescroll cnpm instal ...
- Windows开发,关于通过写代码加载PDB的那些事
最近,接到一个活,要写一个程序,用来批量分析一堆dll和对应的PDB, 其实工作很简单,就是根据一堆偏移,通过PDB文件,找到对应dll里面对应位置的明文符号, 简单的需求,实现起来,通常都很麻烦, ...
- 十、hibernate的延迟加载和抓取策略
延迟加载:控制sql语句发送时机 抓取策略:控制sql语句格式,子查询.连接查询.普通sql 延迟加载 延迟加载(lazy),也叫做懒加载:执行到该行代码时,不发送sql进行查询,只有在真正使用到这个 ...
- kubernetes(k8s)容器集群管理
Kubernetes介绍 Kubernetes是google在2014年6月开源的一个容器集群管理系统,使用go语言开发,Kubernetes也称k8s. k8s是google内部一个叫borg的容器 ...
- h5py库
参考文献:http://docs.h5py.org/en/latest/high/dataset.html h5py文件存放数据集(dataset)和组(group). dataset类似数组类的数据 ...
- php 字符转成数字
1.第一种转换方式:在要转换的变量之前加上用括号括起来的目标类型,如 (int):(bool):(float):(string):(array):(object) 2.第二种转换方式:使用3个具体类型 ...
- 观察者模式Observer
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11409319.html 1. 定义定义对象间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依 ...