京西商城——前端项目的创建以及前后端联调

news/2025/2/19 3:30:23/

创建VUE项目

在jingxi_shop_project文件夹中再创建一个 frontend 文件夹用来存放前端项目

/jingxi_shop_project/backend/jingxi_shop_project....../frontend/jingxi_shop_web......

首先要安装 node.js 和 VUE cli,进入到项目目录内创建项目

vue create jingxi_shop_web,在这个项目我选择了VUE3,Router,VueX,CSS Pre-processos作为基础配置。

项目资源准备

首先在src目录(一般开发都在src下进行)

CSS

src下的assets下,创建了css文件夹来存放css的基础配置(大家可以把css样式代码直接拿走食用)

assets/css/base.js:

@charset "utf-8"
@import ".base/.css";/* 全局重置和基础样式 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;outline: none;
} */* {margin: 0;padding: 0;outline: none;
}body {font-size: 12px !important;font-family: '微软雅黑', Helvetica, Arial, sans-serif, '宋体', Verdana;background-color: #fff;color: #333;
}li{list-style: none;
}img{border: 0 none;vertical-align: middle;
}a {color: #333;text-decoration: none !important;outline: none;cursor: pointer;
}a:focus{outline: none;
}.clearfix::after{visibility: hidden;clear: both;height: 0px;display: block;content: "";
}input{vertical-align: middle;border: none;background-color: none;
}select{vertical-align: middle;border: none;background-color: none;
}button{text-align: center;border: 0;cursor: pointer;
}h1,
h2,
h3,
h4,
h5,
h6 {font-weight: normal;font-size: 12px;
}textarea,
input {word-wrap: break-word;word-break: break-all;padding: 0px;background: none;
}label{cursor: pointer;
}input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner{border: none;
}input[type="button"],
input[type="submit"]{cursor: pointer;
}input:focus {outline: none;
}.fl{float: left;
}.fr{float: right;
}.cs{cursor: pointer;
}/* 超过一行的多余内容变成... */
.dian1{text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
}/* 超过一行的多余内容变成... */
.dian1{text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}/* 超过一行的多余内容变成... */
.dian1{text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
}

assets/css/config.js:

@import './base.css';/* 定义全局变量 */:root {--font-red: #ef0115;--font-gray: #999;--content-width: 1200px;--el-color-danger: #e2231a !important;
}

iconfont

Iconfont 是一种将图标以字体形式嵌入到网页中的技术,它允许开发者通过简单的 CSS 类来使用和控制图标,提供了跨平台的一致性、可伸缩性和样式一致性,同时减少了HTTP请求和图标文件的体积,优化了网页性能和开发效率。

只需要再在iconfont官网选择需要的iconfont样式,下载到项目就可以使用

element-Puls

我们之后还会用到element-Plus,可以先下载 npm install element-Plus

导入main.js

在main.js入口文件导入我们刚刚下载的资源才可以在项目中使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入CSS样式
import '@/assets/css/config.css'
// 引入iconfont样式
import '@/iconfont/iconfont.css'
// 引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

前后端联调

我们可以在src下创建一个 network 文件夹来处理网络请求

我们可以将axios请求封装成两个文件,将通用的部分封装成一个axios的基础配置(包括基础 URL、超时时间、请求和响应拦截器等)

然后再定义包含实际请求函数的文件。

src/network/requestConfig.js:

import axios from 'axios';export function request(config){const instance = axios.create({baseURL: "http://localhost:8000",timeout: 5000})// 请求拦截instance.interceptors.request.use(config=>{console.log('Sending request to:', config.url);return config;}, err=>{console.error('Request error:', err);})// 响应拦截instance.interceptors.response.use(res=>{console.log('Received response from:', res.config.url);return res.data?res.data:res;}, err=>{console.error('Response error:', err);})return instance(config);
}

src/network/home.js:

import {request} from './requestConfig.js'export function getMainmenu(){return request({url: "/menu/main_menu",})
}

验证前后端联通

在页面组件中调用上面封装好的请求函数

<script setup>import {getMainmenu} from "@/network/home.js"import { onMounted, ref } from "vue"let leftMenuData = ref([])onMounted(()=>{getMainmenu().then(res=>{console.log(res);})})
</script>

解决跨域问题

Access to XMLHttpRequest at ‘http://localhost:8000/menu/main_menu/’ (redirected from ‘http://localhost:8000/menu/main_menu’) from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

在这里插入图片描述

此时我们运行前后端,会发现在控制台有这样一个跨域问题,是因为端口号不同造成的请求失败,这就要我们在后端项目的settings中配置CORS来允许任何来自不同源(域名、协议或端口)的 web 页面访问服务器上的资源。

  1. 安装django-cors-header
  2. 在INSTALLED_APPS中加入'corsheaders'
  3. 在MIDDLEWARE中加入'corsheaders.middleware.CorsMiddleware'
  4. 在settings底部配置允许来自不同源(域名、协议或端口)的 web 页面访问服务器上的资源
settings.py
...
ALLOWED_HOSTS = ['*']
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_HEADERS = ('*')

此时控制台就正常打印后端的数据了

在这里插入图片描述


gitee仓库地址

https://gitee.com/duan-peitong/jignxi_shop_project

若有错误与不足请指出,关注DPT一起进步吧!!!


http://www.ppmy.cn/news/1423405.html

相关文章

2024 年 Web 前端开发趋势

希腊哲学家赫拉克利特认为&#xff0c;变化是生命中唯一不变的东西。这句话适用于我们的个人生活、行业和职业领域。 尤其是前端开发领域&#xff0c;新技术、开发趋势、库和框架不断涌现&#xff0c;变化并不陌生。最近发生的一些事件正在改变开发人员构建网站和 Web 应用的方…

前后端系统开发之——文章管理

原文地址&#xff1a;前后端系统开发之——文章管理 - Pleasure的博客 下面是正文内容&#xff1a; 前言 主要使用的技术&#xff1a;前端使用的是Vue.js&#xff0c;后端使用的是SpringBoot。如不雷同可以直接跳过了。 文章管理是这个系统最主要的一个功能也是最常规的一个功…

202462读书笔记|《一世珍藏的诗歌200首》——你曾经羞赧地向我问起, 是谁最早在此留下足印

202462读书笔记|《一世珍藏的诗歌200首》——你曾经羞赧地向我问起&#xff0c; 是谁最早在此留下足印 《一世珍藏的诗歌200首》作者金宏宇&#xff0c;很多美好的诗&#xff0c;有徐志摩&#xff0c;戴望舒&#xff0c;林徽因&#xff0c;舒婷等的诗精选&#xff0c;很值得一读…

Python分析之3 种空间插值方法

插值是一个非常常见的数学概念,不仅数据科学家使用它,而且各个领域的人们也使用它。然而,在处理地理空间数据时,插值变得更加复杂,因为您需要基于几个通常稀疏的观测值创建代表性网格。 在深入研究地理空间部分之前,让我们简要回顾一下线性插值。 为了演示的目的,我将使…

FebHost:谁可以注册.CA加拿大域名?

在加拿大&#xff0c;互联网域名的注册管理遵循一套独特的规则。特别是对于代表加拿大身份的顶级域名“.ca”&#xff0c;其申请和注册过程涉及一些严格的条件。这些条件确保了只有符合特定标准的个人或实体才能获得这一具有国家象征意义的网络地址。 首先&#xff0c;想要注册…

算法学习笔记Day6——二维数组的花式遍历

引言&#xff1a;一些操作的最佳算法可能不符合我们的直观思路&#xff0c;但是它对计算机来说是有效的&#xff0c;对于我们来说匪夷所思、八竿子打不着的操作可能正好就能够得出符合要求的操作。这其中有很深的数学变换思维&#xff0c;需要勤于思考&#xff0c;多加练习。 …

C++ | Leetcode C++题解之第23题合并K个升序链表

题目: 题解&#xff1a; class Solution {// 21. 合并两个有序链表ListNode *mergeTwoLists(ListNode *list1, ListNode *list2) {auto dummy new ListNode(); // 用哨兵节点简化代码逻辑auto cur dummy; // cur 指向新链表的末尾while (list1 && list2) {if (list1…

深度探索:Secure Hash Algorithm(SHA)全景解析

title: 深度探索&#xff1a;Secure Hash Algorithm&#xff08;SHA&#xff09;全景解析 date: 2024/4/15 18:33:17 updated: 2024/4/15 18:33:17 tags: SHA安全抗碰撞性算法版本实现细节性能优化发展历史应用案例 密码学中的哈希函数 一、哈希函数的定义 哈希函数是一种数…