Web开发 ------ 基于Django+Vue网上购物商城（五）：前后端分离

最新推荐文章于 2025-05-20 14:25:48 发布

原创

最新推荐文章于 2025-05-20 14:25:48 发布 · 2.2k 阅读

26 ·

CC 4.0 BY-SA版权

本文介绍了基于Django和Vue的网上购物商城开发，探讨了前后端分离的原因及其优缺点，并详细讲解了RESTful API、Vue环境搭建、跨域问题解决、Vue组件和axios网络请求库的使用。通过实例展示了如何实现前后端的高效协作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

Web开发 ------ 基于Django+Vue网上购物商城：前后端分离

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]}}</li>
    </ul>

    <p>学生信息: 字典类型 {
   
   {
   
   stuinfos