vue的初识与简单使用---前后端分离通过接口调取数据

Posted 2021-02-14 gukai

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 是专门写策略的好让他可以在页面渲染出来想要的内容

View Code

 

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>

View Code

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‘])

View Code

 

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}),
            ]