标签：文件夹 put settings 语句 ini eve closed control 后端
#### 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 //要在项目根目录下进行打包操作 ‘‘‘
<div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>| <router-link to="/freecourse">FreeCourse</router-link> #这个是新增加的组件 </div>
import FreeCourse from ‘./views/freecourse.vue‘ #加载
{
path: ‘/freecourse‘,
name: ‘freecourse‘,
component: FreeCourse
},
#添加路由地址
<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 是专门写策略的好让他可以在页面渲染出来想要的内容
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>
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‘])
-开放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}), ]
标签：文件夹 put settings 语句 ini eve closed control 后端
原文地址：https://www.cnblogs.com/gukai/p/10651438.html
