Web开发 ------ 基于Django+Vue网上购物商城：前后端分离
完整项目地址：https://gitee.com/dadadaliuliuliiu/ShopProject
一、为什么需要前后端分离?
1.前后端分离的优点
- PC、APP、Pad多端适应的需求。
- SPA, 单页Web应用（single page web application)
我们使用过的很多看起来很高级的网页，比如网易云或者京东等页面，他们比较厉害的一点是页面看起来只有一个，不管你点击什么地方，永远不会刷新页面，都是感觉是在一个页面上完成的操作。 - 前后端开发职责不清晰(eg: template是由前端还是后端负责?)
- 开发效率问题，前后端互相等待
前端一直配合后端，能力受限
后台开发语言和模板高度耦合，导致开发语言严重依赖.
2.前后端分离的缺点
- 前后端学习门槛增加， 前端工作量加大
- 数据依赖导致文档的重要性增加
- SEO的难度增加: baidu --> westos —> api
SEO（Search Engine Optimization)搜索引擎优化。 - 后端开发模式迁移增加成本
总结: 前后端分离是未来的趋势，像APP开发不需要SEO优化的。
二、RESTful API
rest_frameworkhttps://blog.csdn.net/dakengbi/article/details/90764412框架是基于Django的，帮助我们快速开发符合restful规范的接口框架,它主要适用于前后端分离项目。
RESTful：Representational State Transfer（表象层状态转变），只是一种架构方式的约束，给出一种约定的标准，完全严格遵守RESTful标准并不是很多，也没有必要。但是在实际运用中，有RESTful标准可以参考，是十分有必要的。在工作中对api接口规范、命名规则、返回值、授权验证等进行一定的约束
- 轻量， 直接通过HTTP协议（不需要额外的协议）, 执行GET/POST/DELETE/PUT/PATCH操作.
- 面向资源，（goods/1，1就是资源）一目了然，具有自解释性。
- 数据描述简单，一般使用xml或者json做数据通讯。
三、渐进式框架Vue
Vue 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue两大核心思想：组件化和数据驱动。
View通过View-Model的DOM Listeners将事件绑定到Model上，而Model则通过Data Bindings来
管理View中的数据，View-Model从中起到一个连接桥的作用。
1.Vue环境搭建
npm install vue-cli -g //全局安装 vue-cli
1.安装 nodejs
2.命令行安装cnpm, 使用淘宝的镜像源
安装nodejs后就有了npm命令
(base) F:\ziliao\python_kaifa\my_code\12_django项目2\vueExecise\online-store-vue-master>npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\daliu\AppData\Roaming\npm\cnpm -> C:\Users\daliu\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm+ cnpm@6.1.1 added 685 packages from 953 contributors in 31.308s
3.下载Vue项目代码
4.切换到文件目录, 安装依赖包
(base) F:\ziliao\python_kaifa\my_code\12_django项目2\vueExecise\online-store-vue-master>cnpm install
5.独立的运行前端项目
(base) F:\ziliao\python_kaifa\my_code\12_django项目2\vueExecise\online-store-vue-master>npm run dev
6.浏览器访问http://localhost:8080
2.商品分类数据与Vue
接口相关代码都放在src/api/api.js里面，调试接口的时候我们首先需要新建一个自己的host，然后替换要调试的host
新建local_host
let local_host = 'http://47.105.62.144:8000';
替换商品类别默认的host
//获取商品类别信息
export const getCategory = params => {
if('id' in params){
return axios.get(`${
local_host}/categorys/`+params.id+'/');
}
else {
return axios.get(`${
local_host}/categorys/`, params);
}
};
这个时候在pycharm进入服务器激活虚拟环境运行ShopProject项目
访问 http://127.0.0.1:8080
发现不显示商品分类了，是因为这涉及到了跨域问题，前端与后端分处不同的域名。
3.跨域问题解决
什么是跨域？
CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当浏览器从一个资源(域名)去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问的那个资源就会遇到跨域问题。
域名：
主域名不同 http://www.baidu.com/index.html -->http://www.sina.com/test.js
子域名不同 http://www.666.baidu.com/index.html -->http://www.555.baidu.com/test.js
域名和域名ip http://www.baidu.com/index.html -->http://180.149.132.47/test.js
端口：
http://www.baidu.com:8080/index.html–> http://www.baidu.com:8081/test.js
协议：
http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/test.js
后端服务器解决跨域问题的方法：
我们需要为后端添加跨域访问的支持。使用CORS中间键来解决后端对跨域访问的支持。
1.安装模块： django-cors-headers
django-cors-headers 使用说明：https://github.com/ottoyiu/django-cors-headers
(venv) [root@todolist-server ShopProject]# pip install -i https://pypi.douban.com/simple django-cors-headers
2.添加子应用coreschema到INSTALL_APPS中
'coreschema',
3.添加中间件corsheaders.middleware.CorsMiddleware
MIDDLEWARE = [
# 要放的尽可能靠前，必须在CsrfViewMiddleware之前。我们直接放在第一个位置就好了
'corsheaders.middleware.CorsMiddleware',
# ........
]
4.设置允许跨域:
CORS_ORIGIN_ALLOW_ALL = True
5.访问 http://127.0.0.1:8080 数据就可以填充进来了
此时运行ShopProject项目
访问 http://127.0.0.1:8080
商品分类详情信息就能显示了
四、Vue基本组件
1.第一个Vue程序实现步骤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. 导入开发版本的Vue.js -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--
3. 使用简洁的模板语法把数据渲染到页面上
id='idname' #idname
class='clsname' .clsname
-->
<!--Vue实例的作用范围是什么呢?
Vue会管理el选项命中的元素及其内部的后代元素.
-->
<p>{
{
name}}</p>
<div id="app" class="appcls">
{
{
name }} -{
{
age }}
<h3 style="color: red">{
{
name}}</h3>
<ul>
<li>{
{
foods[0]}}</li>
<li>{
{
foods[1]}
最低0.47元/天 解锁文章
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
