Django+Vue网上购物商城项目前后端分离
目录
一、为什么需要前后端分离
1.前后端分离的优点
2.前后端分离的缺点
3.RESTful API
4.渐进式框架Vue
5.Vue环境搭建
二、项目代码结构
1.商品分类数据与Vue
2.跨域问题解决
3.商品列表页数据
4.用户登录接口
5.用户收藏
6.Vue基本组件
7.综合应用范例: 购物车计数器
三.axios网络请求库
1.axios应用步骤
2.综合应用范例参考资料
3.范例代码
四.axios与Vue
1.注意事项
2.参考资料
3.代码范例
一、为什么需要前后端分离
1.前后端分离的优点
- PC、APP、Pad多端适应的需求。
- SPA开发模式开始流行
- SPA, 单页Web应用（single page web application)
- 前后端开发职责不清晰(eg: template是由前端还是后端负责?)
- 开发效率问题，前后端互相等待
- 前端一直配合后端，能力受限
- 后台开发语言和模板高度耦合，导致开发语言严重依赖.
2.前后端分离的缺点
- 前后端学习门槛增加， 前端工作量加大
- 数据依赖导致文档的重要性增加
- SEO的难度增加: baidu --> westos ---> api SEO（Search Engine Optimization)搜索引擎优化。
- 后端开发模式迁移增加成本
总结
:
前后端分离是未来的趋势，像
APP
开发不需要
SEO
优化的。
3.RESTful API
RESTful API
目前是前后端分离的最佳实践
(
标准
)
。
- 轻量， 直接通过HTTP协议（不需要额外的协议）, 执行GET/POST/DELETE/PUT/PATCH操作.
- 面向资源，一目了然，具有自解释性。
- 数据描述简单，一般使用xml或者json做数据通讯。
4.渐进式框架Vue
Vue
是一套用于构建用户界面的渐进式框架。
Vue
被设计为可以自底向上逐层应用。
Vue
两大核心思
想：组件化和数据驱动。
- View通过View-Model的DOM Listeners将事件绑定到Model上，而Model则通过Data Bindings来管理View中的数据，View-Model从中起到一个连接桥的作用。
5.Vue环境搭建
第一步
:
安装
nodeJs
第二步
:
运行
cmd,
打开命令行
第三步
:
安装
cnpm,
使用淘宝的镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
第四步
:
下载
Vue
项目代码
第五步
:
切换到文件目录
,
安装依赖包
cnpm install
第六步
:
独立的运行前端项目
cnpm run dev
第七步
:
浏览器访问
http://127.0.0.0:8080
二、项目代码结构
- src/api 所有组件的api都是在这里面配置的
- src/axios： http request 拦截器，比如404、500错误拦截
- src/components 基础的组件
- src/router vue-router配置
- src/static 全局的静态文件
- src/store vuex放的内容
- src/style 样式文件
- src/views 所有的组件
1.商品分类数据与Vue
接口相关代码都放在
src/api/api.js
里面，调试接口的时候我们首先需要新建一个自己的
host
，然后替换要调试的host
- 新建local_host
let local_host = 'http://ip: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);
}
};- 这个时候访问 http://127.0.0.1:8080
发现不显示商品分类了，是因为这涉及到了跨域问题，接下来就解决跨域的问题
2.跨域问题解决
- 什么是跨域？
- 浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域
- 域名：
- 主域名不同 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
- 后端服务器解决跨域问题的方法：
- 安装模块： django-cors-headers
- django-cors-headers 使用说明：https://github.com/ottoyiu/django-cors-headers
- 添加子应用coreschema到INSTALL_APPS中
- 添加中间件corsheaders.middleware.CorsMiddleware
MIDDLEWARE = [
# 要放的尽可能靠前，必须在CsrfViewMiddleware之前。我们直接放在第一个位置就好了
'corsheaders.middleware.CorsMiddleware',
# ........
]
- 设置允许跨域: CORS_ORIGIN_ALLOW_ALL = True
- 访问 http://127.0.0.1:8080 数据就可以填充进来了
3.商品列表页数据
商品列表页会判断我们是
serach
还是
getGoods
getListData() {
if(this.pageType=='search'){
getGoods({
search: this.searchWord, //搜索关键词
}).then((response)=> {
this.listData = response.data.results;
this.proNum = response.data.count;
}).catch(function (error) {
console.log(error);
});
}else {
getGoods({
page: this.curPage, //当前页码
top_category: this.top_category, //商品类型
ordering: this.ordering, //排序类型
pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间
pricemax: this.pricemax // 价格最高 默认为‘’
}).then((response)=> {
this.listData = response.data.results;
this.proNum = response.data.count;
}).catch(function (error) {
console.log(error);
});
}
},4.用户登录接口
vue
中登录接口是
login
//登录
export const login = params => {
return axios.post(`${local_host}/login/`, params)
}5.用户收藏
6.Vue基本组件
第一个
Vue
程序实现步骤
- 导入开发版本的Vue.js
- 创建Vue实例对象，设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
el
挂载点
- el的作用是什么?
- el是用来设置Vue实例挂载(管理)的元素。
- Vue实例的作用范围是什么呢?
- Vue会管理el选项命中的元素及其内部的后代元素.
- 是否可以选择其他的选择器?
- 可以使用其他的选择器，但是建议使用ID选择器.
- 是否可以设置其他的DOM(h1, h2, p,span)元素呢?
- 可以使用其他的双标签(除html和body)
data
属性
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂数据类型时，遵守js的语法即可
本地应用
(
重点掌握
)
v-text
- v-text指令的作用是: 设置标签的内容(textContent)
- 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
- 内部支持表达式
v-html
- v-html指令的作用是: 设置元素的innerHtml
- v-html内容中有html结构会被解析为标签，而v-text只会解析为文本
- //收藏
- export const addFav = params => { return axios.post(`${local_host}/userfavs/`,params) }
- //取消收藏
- export const delFav = goodsId => { return
- axios.delete(`${local_host}/userfavs/`+goodsId+'/') }
- export const getAllFavs = () => { return axios.get(`${local_host}/userfavs/`) }
- //判断是否收藏
- export const getFav = goodsId => { return
- axios.get(`${local_host}/userfavs/`+goodsId+'/') }解析文本使用v-text，解析html使用v-html
v-on
- v-on指令的作用是: 为元素绑定事件
- 事件名不需要写on，指令可以简写为@， 绑定的方法定义在methods属性中.
- 方法内部通过this关键字可以访问定义在data中的数据。
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数，
- 事件后面可以跟上修饰符对事件进行限制，eg:.enter限制触发的按键为回车。
v-show
- v-show指令的作用是:根据真假切换元素的状态,
- 工作原理: 修改元素的display属性，实现显示和隐藏none。
- 指令后面的内容，最终都会解析为布尔值，True代表显示，False代表隐藏.
v-if
- v-if指令的作用是: 根据表达式的真假切换元素的显示状态。
- 工作原理: 操纵DOM元素切换显示状态， True元素存在于DOM树中， False元素从DOM树中移除。
- 如何选择? 频繁的切换v-show，因为切换消耗小。不频繁的切换使用v-if.
v-bind
- v-bind指令的作用是为元素绑定属性.
- 完整的写法 v-bind:属性名
- 简写写法 :属性名
- 需要动态的增删class建议使用对象的方式
v-for
- v-for指令的作用是根据数据生成列表结构。
- 数组经常和v-for结合使用
- 语法是(item,index) in 数据
- 数组长度的更新会同步到页面上，是响应式的.
v-model
- v-model指令的作用式便捷的设置和获取表单元素的值。
- 绑定的数据会和表单元素值相关联
- 绑定的数据<- -> 表单元素的值， 双向绑定.
7.综合应用范例: 购物车计数器
三.axios网络请求库
Axios
是一个基于
promise
的
HTTP
库，可以用在浏览器和
node.js
中。
使用
cdn
使用
npm
npm install axios
1.axios应用步骤
axios
必须先导入才可以使用。
使用
get
或
post
方法即可发送对应的请求
then
方法中的回调函数会在请求成功或请求失败时触发
通过回调函数可以获取响应内容或错误信息。
2.综合应用范例参考资料
接口
1:
随机笑话
请求地址
:
https://autumnfifish.cn/api/joke/list
请求方法
:get
请求参数
:num(
笑话条数
,
数字
)
响应内容
:
随机笑话
接口
2:
用户注册
请求地址
:
https://autumnfifish.cn/api/user/reg
请求方法
:post
请求参数
:username(
用户名
,
字符串
)
响应内容
:
注册成功或失败
3.范例代码
四.axios与Vue
1.注意事项
axios
网络请求库与
Vue
的结合
- axios回调函数中的this已经改变，无法访问到data中的数据
- 可以将this保存起来，回调函数中直接使用保存的this即可
- 和本地应用最大的区别就是改变了数据的来源.
2.参考资料
接口
:
随机获取一条笑话
- 请求地址:https://autumnfifish.cn/api/joke
- 请求方法:get
- 请求参数:无
- 响应内容:随机笑话
3.代码范例
