vue的安装
#### 、环境搭建
'''
- 安装node ```
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
``` - 安装cnpm ```
npm install -g cnpm --registry=https://registry.npm.taobao.org
``` - 安装脚手架 ```
cnpm install -g @vue/cli
``` - 清空缓存处理 ```
npm cache clean --force
``` #### 、项目的创建 - 创建项目 ```js
vue creat 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件
``` - 启动/停止项目 ```js
npm run serve / ctrl+c
// 要提前进入项目根目录
``` - 打包项目 npm run build
//要在项目根目录下进行打包操作
'''
1. vue 是简单的布置前端页面的框架
在vue项目里面 views 里面放入的是跳转的页面组件
2.
在vue项目里面 App.vue 是主要的页面组件,如果创建新的页面组件就需要添加
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>|
<router-link to="/freecourse">FreeCourse</router-link> #这个是新增加的组件
</div>
3.
在vue项目里面 router.js 路由里面写路径:
import FreeCourse from './views/freecourse.vue' #加载
{
path: '/freecourse',
name: 'freecourse',
component: FreeCourse
},
#添加路由地址4.
新增的组件让他生效做配置
<template>
<div class="about">
<h1>这是免费课程</h1>
{{course_list}} # {{*****}} 是动态渲染用的
<p v-for="course in course_list">{{course}}</p> #这里是用for语句循环显示渲染出来的内容
</div> </template>
######## template 是专门写渲染踹的内容 <script>
export default {
name: 'freecourse', #这里的name指向的是路由的名字
data: function () { #data 是让他渲染出来列表中的数据显示
return {
course_list: ['python课程', 'linux', 'go语言']
}
}
}
</script>
########script 是专门写策略的好让他可以在页面渲染出来想要的内容
5.
使用vue的ajax的发送请求方法
安装: npm install axios 安装好了在package.json 可以看到
在 main.js 中配置:
//导入axios
import axios from 'axios'
//把axios对象付给$http
Vue.prototype.$http=axios
在组件的js代码中写:
<template>
<div class="about">
<h1>这是免费课程</h1>
<!--{{course_list}}-->
<p v-for="course in course_list">{{course}}</p>
<button @click="init">点我</button> #就是ajax请求,点击触发
</div>
<!--{{course_list}}-->
</template>
#############模板显示内容
<script>
export default {
name: 'freecourse',
data: function () {
return {
course_list: [] #这里设置为空就可以,数据驱动页面
}
},
methods: { #这里就是axios 发送请求的实现
'init': function () {
var _this = this #这里 吧this 赋值给_this
this.$http.request({
//向下面的地址发送get请求
url:'http://127.0.0.1:8078/course/', #url 指向的是后端发送请求的接口
method:'get' #设置请求模式
}).then(function (response) {
//response.data才是真正的数据
console.log(response.data)
_this.course_list=response.data #前面赋值给_this 拿到的数据给到course_list
})
}
},
mounted: function () { //这段代码就是不需要点击事件了,当页面跳转到指定的,自动渲染页面了
this.init()
}
}
</script>6.
后端:
解决跨域问题:
创建一个文件 MyMiddle.py
from django.utils.deprecation import MiddlewareMixin class MyMiddleware(MiddlewareMixin):
def process_response(self, request, response):
# 处理了简单请求
response['Access-Control-Allow-Origin'] = '*'
# 处理非简单请求
if request.method == 'OPTIONS':
response['Access-Control-Allow-Headers'] = '*'
# response['Access-Control-Allow-Methods']='PUT,PATCH'
response['Access-Control-Allow-Methods'] = '*' return response 在settings内添加解决跨域问题 MIDDLEWARE = [
'app.MyMiddle.MyMiddleware'
] 在视图函数中创建简单的一个数据信息:
from rest_framework.views import APIView
from rest_framework.response import Response class Course(APIView):
def get(self,request):
return Response(['python课程', 'linux', 'go语言','dasfdasfdasf'])
7.
后端开放用户上传图片接口:
-开放media路径
-创建meidia文件夹（在根路径下）
-在setting中配置：
MEDIA_ROOT=os.path.join(BASE_DIR,'media')
-在urls.py中
from django.views.static import serve
from luffy_city import settings
urlpatterns = [
url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
]