day01、day02-----vue+Django+Apache

1.前言

1.可采用vue框架做前端，django做后端，做到前后端分离。
2.vue框架做前端的好处是可以将有价值的css、js文件打包成很难读懂的js文件
3.学习地址:https://www.runoob.com/vue2/vue-tutorial.html;https://cn.vuejs.org/v2/guide/index.html

2.vue（默认配置）

2.0 原理

通过路由完成：将App.vue嵌入index，然后把components下的vue文件嵌入到App.vue里。
最后显示index页面。

2.1 创建项目

1.cmd
进入项目存放的文件夹，再创建项目

vue create vueDemo

按回车确认选择
2.public文件夹里的东西不会编译打包

2.1 编写

2.1.1 浏览器访问最后返回的是index.html页面,因此首先把public文件下的index.html的内容改成自己的模板。

2.1.2 想让浏览器访问按照router.js文件访问,步骤如下(main.js是项目自带的，router.js只是为了方便存放router建立的)：

1.在main.js文件配置路由，通过添加下面代码实现

首先添加以下代码

import vueRouter from 'vue-routerVue.use(vueRouter)var router=new vueRouter({
    mode:"history",base:__dirname,routes,
})

然后通过在new Vue里添加代码将router挂在vue上，添加后是：

new Vue({
    //渲染app时候调用router路由,到App.vue找到相应的模板进行渲染，然后把App.vue嵌入index里，且渲染App.vue时通过路由设置把main.vue嵌入到App.vue的<router-view></router-view>里router,  //把router挂在vue上，使其执行。render: h => h(App),
}).$mount('#app')

此时修改完的main.js文件为：

import Vue from 'vue'
import App from './App.vue'
import vueRouter from 'vue-router'
import {
    routes} from './routes.js'//这个就是导入我们单独定义的存放路由的js文件Vue.config.productionTip = false
Vue.use(vueRouter)var router=new vueRouter({
    mode:"history",base:__dirname,//routes:[], //此处routes的值是个字典，存放的是路由值，但为了方便，把它单独抽出来作为一个单独存放路由的文件routes,//引入的路由值
})new Vue({
    //渲染app时候调用router路由,到App.vue找到相应的模板进行渲染，然后把App.vue嵌入index里，且渲染App.vue时通过路由设置把main.vue嵌入到App.vue的<router-view></router-view>里router,  //把router挂在vue上，使其执行。render: h => h(App),
}).$mount('#app')

界面如下：

2.为了方便建了个routes.js的路由文件，routes.js文件和main.js同目录，且代码如下：(routes的component的值是谁，就把谁拼接入App.vue)

import main from "./components/main.vue";
var routes=[{
    path:'/main.html',//按照这个在本地访问，即在浏览器输入127.0.0.1/main.htmlcomponent:main, //按照path访问后，调用component访问main.vue,这个通过上方import引入了。//而这个main.vue就是我们建的一个嵌入到App.vue的模板。},
];
export {
    routes }//把路由值以字典形式引出给main.js

图片如下：

注意:

因此下面的路由里的industry.html访问是一片空白：

改正成非同级：（听说把.html去了后，path同级也可以访问）

2.1.3 展示界面的内容

展示界面的内容是由我们自己建立components的mian.vue(这个名字随意取)通过路由传给App.vue,再把App.vue传给index.html指定标签下，最后显示出来的。

1.components下的main.vue编写我们要展示的内容，main.vue内容如下：

2.因为main.vue要传给App.vue，因此App.vue要设置一个标签接受它，标签是<router-view></router-view>，且这个语句要放到id=app下，具体代码如下：

3.样式打包

使用vue可以把有价值的css、js文件进行打包，而有价值的样式文件放在src文件夹下，此处我放在了src下的assets下，然后通过在main.js下引入有价值的文件就可完成打包：

有价值的文件进行打包后，没有价值的比如一些公用的js文件就还放在public文件下，此处我放在了public下的assets下，然后这些无价值的文件引入在index中引入：

2.2 运行

通过cmd在项目文件夹下，输入

npm run serve

然后浏览器打开http://127.0.0.1:8080/main.html

2.3多个页面跳转

参考url:https://blog.csdn.net/Janus_lian/article/details/84965459
假如要实现两个页面跳转，那么设置两个vue，一个main.vue，一个show.vue；
此时的存放路由的js文件代码如下：

import main from "./components/main.vue";
import show from "./components/show.vue";
var routes=[{
    path:'',//按照这个在本地访问，即在浏览器输入127.0.0.1/main.html；若想输入127.0.0.1就出来，则path=''即可component:main, //按照path访问后，调用component访问main.vue,这个通过上方import引入了。而这个main.vue就是我们建的一个嵌入到App.vue的模板。},{
    path:'/show.html',name:'show',component:show, }
];
export {
    routes}

接下来两个方法实现跳转：

法一（在main.vue里进行修改）this.$router.push()：
main.vue代码如下：

<template><p @click='goTo()'>main</p>
</template>
<script>export default{
    name:'main',methods:{
    goTo(){
    //直接跳转this.$router.push('/show.html');}}}
</script>

法二（main.vue,show.vue如常配置模板，跳转在App.vue里实现；此种方式可用来路由传参）router-link跳转：
main.vue如下：

<template><p>main</p>
</template>
<script></script>

show.vue如下：

<template><p>show</p>
</template><script></script>

App.vue如下：
router-view是接受传过来的内容，router-link是实现跳转

<template><div id="app"><router-link to='/show.html'><router-view></router-view></router-link></div>
</template><script></script>

2.4 结构化组件开发

视频url：https://download.csdn.net/download/qq_34405401/12264993
文档url：https://download.csdn.net/download/qq_34405401/12265088

2.4.1报错及解决

报错1：

原因：index.vue中引入pagesmenu.vue的路径出错

报错2：

解决：原来vue模板只能有一个根对象，因此我把两个并列的放到一个跟对象下
url：https://www.cnblogs.com/liziyou/p/6708537.html

2.4.2 大错误：vue多级路由中子路由加载时样式失效

原因：和js有关得文件加载不了
解决：把模式从history改成hash就行，就改这一个地方

2.5 数据传递

2.5.1 视频+代码：

https://download.csdn.net/download/qq_34405401/12270402

2.5.2 因为根据2.4已经结构化开发，因此现在的数据传递是在组件内进行数据传递

在父组件中进行数据读取，通过 data(){return} 等语句进行数据传递。而子组件通过props语句进行数据读取，并通过{ {数据}}显示数据。
例子：

2.5.3 通过jquery的ajax动态改变数据（先npm install jquery）

json文件如下：

2.6 组件化开发引起的多级路由以及多级路由传参（与2.3、2.4、2.5都有关系）

2.6.1 二级路由+传一个参数

2.6.1.1 代码

2.6.1.2 来源

https://www.jb51.net/article/154951.htm

2.6.1.3 内容

一、嵌套路由（配置好父路由component后，在父路由下面添加children属性来配置这个父路由的子路由）
需要注意的是：父组件中的是子组件的占位符是必不可少的
嵌套路由的现象：点击了路由跳转之后父路由组件的内容一直呈现；子路由的内容进行切换，地址栏的路径也随之改变。

// 嵌套路由{
    path: '/nest',component: () => import('@/nest/nest'),// 嵌套路由的关键字children，在父路由中添加children数组 中添加子路径children:[{
    // 要注意，以 / 开头的嵌套路径会被当作根路径,这让你充分的使用嵌套组件而无须设置嵌套的路径。如果这里的path的值为'/son1将无法渲染son1子组件'path: 'son1',component: () => import('@/nest/nest_son1')},]}

上面子路由中加不加‘/’ 的区别：当去到son1的时候加 ‘/'会在地址栏中显示 #/son1;不加 ‘/'的时候回在地址栏中显示 #/nest/son1
注意：/xx就是根路径（引起的问题：https://www.cnblogs.com/xyyt/p/7718867.html）

2.6.2 三级路由

2.6.2.1 参考1

https://www.cnblogs.com/qianjinyan/p/10899921.html

2.6.2.2 参考2+copy展示（看图了解大概意思即可）

转自：https://blog.csdn.net/mr_javascript/article/details/80744268
1）一级路由

2）二级路由

3）三级路由

4）效果

2.6.3 路由传多个参数（这里只介绍一种方法）

代码地址：同2.6.1
1）path向传递一个参数一样拼接(以两个为例)

2）传值

3）data接受，并在模板使用

2.6.4 问题

2.6.4.1 问题1—解决路由切换(可能同一路由)，页面不更新

vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。
https://blog.csdn.net/w390058785/article/details/82813032

2.7 vue的字符串拼接

ES6 引入模板字符串来简化了字符串的拼接，以vue举例

2.7.1 正常拼接

<template><li class="list-group-item"><div class="handle"><a href="javascript:;" @click="del">删除</a></div><p class="name"><span>{
    {
    comment.name}}</span><span>说:</span></p><p class="content">{
    {
    comment.content}}</p></li>
</template>
<script>export default {
    data() {
    return {
    comment: {
    name: '张三',content: '哈哈哈，Vue.js挺好用的。'}}},methods: {
    del() {
    alert(this.comment.name);if(window.confirm(`确定要删除${
    this.comment.name}的评论吗？`)) {
    //这里省略实现删除的方法}}}}
</script>————————————————
原文链接：https://blog.csdn.net/qq15577969/article/details/89311252

2.7.2 属性的值拼接，记住一定加‘：’。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量！）

3.前端vue编写好后，将其与后端部署到同一服务器上（避免跨域），这里使用apache服务器

3.0 apache服务器启动

3.0.1启动

下载并安装，这里直接用发来的压缩包，解压即可。然后在cmd中进入bin文件夹，输入httpd启动服务器。

3.0.2端口冲突(windows时常会把端口再次占用，因此得常改)

在启动过程中发生了一些不愉快：apache默认端口80，可是win10的系统进程会占用。
查找占用80端口的进程：netstat -an | find “80”
查找所有进程端口和进程id：netstat -ano
解决：https://www.cnblogs.com/wxjnew/p/7153899.html
https://jingyan.baidu.com/article/08b6a591a31d8914a8092214.html

3.1vue前端部署

3.1 vue打包

1.打包指令 npm run build

2.打包完成后生成一个dist文件夹，将文件夹的json数据删除(因为不需要了，真实数据在后端生成，当然后端生成的数据的格式要按照原先写好的json来)。接下来将dist内的文件全部拷贝到apache的htdocs文件中（拷贝到htdocs是因为这个是默认启动的，不用修改配置。当然也可以修改配置，指定默认启动前端的位置）

3.2 django后端部署

3.2.1 先将测试django能否正常返回数据，这里返回json数据需要引入一个JsonResponse包

1.在views写返回测试数据的函数

from django.http import HttpResponse
from django.http.response import JsonResponse
def getMyData(request):data = {
    "lines":{
    "line1": [[0, 115], [1, 124],[2, 114],[3, 121],[4, 115],[5, 83],[6, 102],[7, 148],[8, 147],[9, 103],[10, 113]],"line2": [[0, 20], [1, 100],[2, 120],[3, 80],[4, 110],[5, 140],[6, 40],[7, 70],[8, 147],[9, 90],[10, 113]]}}return JsonResponse(data)

2.配置好路由

from django.contrib import admin
from django.urls import path
from backend.services import mydata
urlpatterns = [path('admin/', admin.site.urls),path('assets/mydata.json', mydata.getMyData),
]

3.用9999端口（随意）启动

4.访问

发现成功显示，这说明django后端可以成功返回数据

3.2.2 正式部署django，并使前端vue可与此关联

1.django部署时，apache通过模块wsgi（网关）来调用关联django，因此我们需要先下载符合自己python与apache版本的wsgi，并通过pip安装
链接：https://www.lfd.uci.edu/~gohlke/pythonlibs/#mod_wsgi

2.为了将后端与apache关联，需要修改apache的配置文件httpd。conf

<1>建立apache与python django的连接
输入mod_wsgi-express module-config，显示出红框内的东西，将其复制到http.conf内，这就建立好连接了

<2>此时看下前端中请求数据的代码， 我们知道要后端请求数据，因此当前端向服务器发送这个请求时，服务器要把它转向后端。

因此要在httpd.conf中加上：

WSGIScriptAlias /data  D:/desktop/backend/stockBackend/stockBackend/wsgi.py

即服务器只要收到前端发送带有data的请求，就通过wsgi.py这个文件转向后端，后端就根据路由返回数据；
注意与上述图片中红框对应的后端路由为（即路由名为请求中data后面的部分）：

然后此路由对应的views函数为：

from django.http.response import JsonResponse# Create your views here.# getCompanyTables是获取公司信息做成表格展示
def getCompanyTables(request):data = {
    "shen": {
    "datas": [{
    "id": "000000", "name": "公司1", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司2", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司3", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司4", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司5", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司6", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司7", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司8", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司9", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司10", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司11", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司12", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98}]},"hu": {
    "datas": [{
    "id": "000000", "name": "公司1", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司2", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司3", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司4", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司5", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司6", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司7", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司8", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司9", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司10", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司11", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98},{
    "id": "000000", "name": "公司12", "news1": 20, "news2": 20, "news3": 20, "news4": 20, "ind": 98}]}}return JsonResponse(data)

<3>此时http.conf还需要加上服务器找到项目目录的指令

WSGIPythonPath D:/desktop/backend/stockBackend

<4>开启后端目录所有权限，以便于服务器访问

<Directory D:/desktop/backend/stockBackend/stockBackend><Files wsgi.py>Require all granted</Files>
</Directory>

<5>（期间也可以对404进行重定向：ErrorDocument 404 /index，index是自己前端的首页path）最后配置完的http.conf如下：

3.2.3 访问成功（此时数据均从后端所得）

3.3 前后端传值（3.2中已实现前端可以访问后端的数据，前后端传值在这里简单实现）

情景:3.2中后端的值是写好的固定json文件，这个json就是后端往前端传递的数据格式，前端按照这个固定格式访问。因此在实际情况中，后端从数据库读取数据后，把数据写成原先的json格式的字典，注意这里是字典，字典是种数据类型，因此最后需要通过return JsonResponse(data)转换成json数据格式并传回去。但是如果后端读取数据时需要前端的条件，比如读取固定id的数据，这时就涉及到前后端传值。
传值很简单，如下：
传多个值就是:

data: {
    "val1": "1","val2": "2",
},

前端：

后端：

3.4 为了方便预览、数据前后端真假切换，vue使用全局变量

1.定义全局变量

2.使用

4. django做后端与apache服务配合使用的bug

4.1 存在pandas、numpy的引入，会无限[正在等待….的响应]

而解决办法很简单，就是在Apache的conf配置文件中增加一句话：WSGIApplicationGroup %{
    GLOBAL}

参考：
https://www.lizenghai.com/archives/852.html
https://blog.csdn.net/u013884777/article/details/84134649

5. 使用apache服务器部署多个项目存在的问题

在写完实训项目后，想新建一个vue+django+apache的项目，这里需要部署到apache上，但是不想删除原来的，因此新建了一个apache文件夹
新建的ApacheDRT的配置文件httpd中只改了以下这部分：

然后启动apache、浏览器输入127.0.0.1后，打开的网站一直是原先的项目，刷新清除缓存都没用，后来经过调试发现ApacheDRT的配置文件中下面这行还是指向的原先Apache24
因此，将它修改为：

然后再启动ApacheDRT下的httpd，浏览器打开127.0.0.1后虽然还是原来的项目，但是此时刷新一下就好！