阅读目录
1.用C++语言编写，用来运行JavaScript语言
2.node能够为前端项目提供server (包含了socket)
node下载安装：https://nodejs.org/zh-cn/
一路点击下一步就能够。
# 换国内源，加速下载，经过命令行换源：
# 管理员命令行：npm install -g cnpm --registry=https://registry.npm.taobao.org
# MacOS: sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
# 索引npm的指令均可以换成cnpm
# npm install vuex => cnpm install vuex
# cnpm install -g @vue/cli
# 若是报错：npm cache clean --force
起步
1.cd 到目标目录
2.建立项目：vue create 目录名
建立项目的过程
提示下载原：选择淘宝镜像
具体配置：上下键切换，空格键选择，回车键进入下一步
1.第二个选项进入自定义配置
2.Babel jsES6语法转换ES5，Router路由 Vuex组件数据交互 Formatter格式化代码
3...有提示选择大写，没提示默认第一个便可选y
开始下载：
①终端启动
1.进入项目：cd到项目目录
2.启动项目：npm run serve
②pycharm配置启动
1.安装vue.js插件，重启
2.配置项目的npm启动项
3.启动node搭建的socket
若是项目环境搭建失败，能够将搭建成功的项目中的相关文件及文件夹：
而后打开管理员打开cmd命令
cd e:\vue-proj进入项目文件目录下
cnpm install 对本身电脑的当前环境进行从新安装依赖，重构项目环境，这样就能够用了，使用pycharm打开该文件夹就好了
该方法能够用于快速建立和搭建项目环境使用，这样就不用每次vue create进行下一步下一步了
打开main.js
修改后按ctrl+s保存后页面会实时刷新，且文件后缀均可以省略不写
页面组件开发
组件建立：
建立新组件以后的基本页面状况：
<template> <!-- 只能有一个根标签 --> </template> <script> export default { name: "Main", data: function() { return { } }, ... } </script> <style scoped> /* scoped 可让样式实现局部化*/ /* 若是让样式实现全局化，则应该写在根组件样式中*/ </style>
组件渲染
<!-- Main.vue 主页组件 --> <template> <div class="main"> <h1>{{ title }}</h1> </div> </template> <script> export default { name: "Main", data:function () { return { title:'主页' } } } </script> <style scoped> .main { height: 100vh; background-color: beige; } h1 { margin: 0; color: darkred; } </style>
<!-- App.vue根组件 --> <template> <div id="app"> <Main></Main> </div> </template> <script> import Main from '@/views/Main' export default { components:{ Main:Main } } </script> <style> html, body { margin: 0; } </style>
说明：
在根组件中设计转跳页面的导航栏
<template> <div id="app"> <ul class="nav"> <li>主页</li> <li>商品页</li> <li>我的页</li> </ul> </div> </template> <script> import Main from '@/views/Main' export default { components:{ Main:Main } } </script> <style> .nav { height: 60px; background-color: silver; } .nav li { float: left; height: 60px; width: 123px; text-align: center; line-height: 60px; } .nav li:hover { background-color: aquamarine; } html, body, ul { margin: 0; } ul { list-style: none; } </style>
建立三个页面组件
<!--Main.vue--> <template> <div class="main"> <h1>{{ title }}</h1> </div> </template> <script> export default { name: "Main", data:function () { return { title:'主页' } } } </script> <style scoped> .main { height: 100vh; background-color: beige; } h1 { margin: 0; color: darkred; } </style>
<!--Goods.vue--> <template> <div class="goods"> <h1>商品页</h1> </div> </template> <script> export default { name: "Goods" } </script> <style scoped> </style>
<!--User.vue--> <template> <div class="user"> <h1>我的页</h1> </div> </template> <script> export default { name: "User" } </script> <style scoped> </style>
配置路由(router.js中)
import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/views/Main.vue'
import Goods from '@/views/Goods.vue'
import User from '@/views/User.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'main',
component: Main
},
{
path: '/goods',
name: 'goods',
component: Goods
},
{
path: '/user',
name: 'user',
component: User
},
//第二种方式
// {
// path: '/about',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
// }
]
})
根组件中：
<template> <div id="app"> <ul class="nav"> <li> <router-link to="/">主页</router-link> </li> <li> <router-link to="/goods">商品页</router-link> </li> <li> <router-link to="/user">我的页</router-link> </li> </ul> <!--<router-view></router-view>--> <router-view/> </div> </template> <script> import Main from '@/views/Main' export default { components:{ Main:Main } } </script> <style> .nav { height: 60px; background-color: silver; } .nav li { float: left; height: 60px; width: 123px; text-align: center; line-height: 60px; } .nav li:hover { background-color: aquamarine; } html, body, ul, h1 { margin: 0; } ul { list-style: none; } a { text-decoration: none; font: bold 20px/60px 'STSong'; } </style>
先后台交互
axios
// 安装 axios(ajax)的命令
// npm install axios --save
// 为项目配置全局axios（main.js中）
import Axios from 'axios'
Vue.prototype.$ajax = Axios
goods组件中设置ajax给后台发送数据(在组件渲染完毕时候发送)
<!--Goods.vue--> <template> <div class="goods"> <h1>商品页</h1> </div> </template> <script> export default { name: "Goods", beforeCreate() { window.console.log("开始建立Goods组件"); }, created() { window.console.log("建立Goods组件完毕"); }, mounted() { window.console.log("Goods组件渲染完毕"); // 请求后台 this.$ajax({ method:'post', url:'http://127.0.0.1:8000/goods/', params:{ info:'前台数据' } }).then(function (res) { window.console.log(res) }) } } </script> <style scoped> </style>
新建一个Django项目，做为后台接收、返回数据
settings.py中手动将csrf中间件注释掉(这里须要注意真正项目中先后端分离时，Django的csrf中间件时经过代码层面禁用并手写安全认证，这里注释掉主要方便咱们测试)
路由配置：
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^goods/', views.goods), ]
视图函数
def goods(request): print(request.method) print(request.POST) print(request.GET) return HttpResponse('后台数据')
发现跨域问题：后台能收到前台发送的请求数据，可是因为跨域问题，只要前台端给后端发送数据，后端都会接收，来者不拒，可是因为跨域问题，致使Django不认识它，因此
不给它返回数据。
## Django跨域问题 #### 什么是跨域 ```python ''' 一般状况下，A网页访问B服务器资源时，不知足如下三个条件其一就是跨域访问 1. 协议不一样 2. 端口不一样 3. 主机不一样 ''' ``` #### Django解决跨域 ```python ''' 安装django-cors-headers模块 在settings.py中配置 # 注册app INSTALLED_APPS = [ ... 'corsheaders' ] # 添加中间件 MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware' ] # 容许跨域源 CORS_ORIGIN_ALLOW_ALL = True ''' ```
解决跨域：
①在pycharm中安装django-cors-headers
②在Django配置文件中：
而后前端进行处理数据：
这样渲染msg后发现报错：
发现msg没有被定义，可是在data中明明已经定义了msg，因此错误不在data中，最后发如今then的回调函数中的this
问题解析：
① 在this.ajax上先声明个变量_this=this将vue实例存起来，而后在then的回调函数中打印this和_this
从以上结果来看，在生命周期钩子函数下的this指向的是当前建立的vue实例，而在这些函数内部使用例如axios与后台交互后回调函数的内部的this并不是指向当前的vue实例;
箭头函数至关于匿名函数，而且简化了函数定义。看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法做用域，由上下文肯定。此时this在箭头函数中已经按照词法做用域绑定了。很明显，使用箭头函数以后，箭头函数指向的函数内部的this已经绑定了外部的vue实例了.
vue-cookie
// 安装cookie的命令
// npm install vue-cookie --save
// 为项目配置全局vue-cookie(在main.js中)
import VueCookie from 'vue-cookie'
// 将插件设置给Vue原型,做为全局的属性,在任何地方均可以经过this.$cookie进行访问
Vue.prototype.$cookie = VueCookie
// 持久化存储val的值到cookie中
this.$cookie.set('val', this.val)
// 获取cookie中val字段值
this.$cookie.get('val')