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-router

Vue.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.html
        component: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