day01、day02-----vue+Django

其他 2020-04-03 08:57:32 阅读次数: 0

文章目录

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>

</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.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端口冲突

在启动过程中发生了一些不愉快：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
链接：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 访问成功（此时数据均从后端所得）在这里插入图片描述

codeDRT
发布了105 篇原创文章 · 获赞 8 · 访问量 4734
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_34405401/article/details/104516502
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022