vue的安装
#### 1、环境搭建 ‘‘‘ - 安装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 ``` #### 2、项目的创建 - 创建项目 ```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的发送请求方法
1 安装: npm install axios 安装好了在package.json 可以看到
2
3 在 main.js 中配置:
4 //导入axios
5 import axios from ‘axios‘
6 //把axios对象付给$http
7 Vue.prototype.$http=axios
8
9 在组件的js代码中写:
10
11 <template>
12 <div class="about">
13 <h1>这是免费课程</h1>
14 <!--{{course_list}}-->
15 <p v-for="course in course_list">{{course}}</p>
16 <button @click="init">点我</button> #就是ajax请求,点击触发
17 </div>
18 <!--{{course_list}}-->
19 </template>
20 #############模板显示内容
21
22 <script>
23 export default {
24 name: ‘freecourse‘,
25 data: function () {
26 return {
27 course_list: [] #这里设置为空就可以,数据驱动页面
28 }
29 },
30 methods: { #这里就是axios 发送请求的实现
31 ‘init‘: function () {
32 var _this = this #这里 吧this 赋值给_this
33 this.$http.request({
34 //向下面的地址发送get请求
35 url:‘http://127.0.0.1:8078/course/‘, #url 指向的是后端发送请求的接口
36 method:‘get‘ #设置请求模式
37 }).then(function (response) {
38 //response.data才是真正的数据
39 console.log(response.data)
40 _this.course_list=response.data #前面赋值给_this 拿到的数据给到course_list
41 })
42 }
43
44 },
45 mounted: function () { //这段代码就是不需要点击事件了,当页面跳转到指定的,自动渲染页面了
46 this.init()
47
48 }
49 }
50 </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}),
]
原文地址：https://www.cnblogs.com/gukai/p/10651438.html
时间： 2024-09-29 16:46:46