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

news/2024/5/19 22:22:57/

创建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安全抗碰撞性算法版本实现细节性能优化发展历史应用案例 密码学中的哈希函数 一、哈希函数的定义 哈希函数是一种数…

PDE判断题

PDE判断题 波动方程满足弱极值原理波动方程满足强极值原理强极值原理波动方程结论 一个均匀细杆&#xff0c;从初始时刻开始受到冷却作用&#xff0c;那么一段时间内&#xff0c;杆上的最高温度一定能在两端或者初始时刻取得。一个定义在全平面上的调和函数&#xff0c;如果有下…

Nodejs 第六十四章(SSO单点登录)

单点登录 单点登录&#xff08;Single Sign-On&#xff0c;简称SSO&#xff09;是一种身份认证和访问控制的机制&#xff0c;允许用户使用一组凭据&#xff08;如用户名和密码&#xff09;登录到多个应用程序或系统&#xff0c;而无需为每个应用程序单独提供凭据 SSO的主要优…

算法训练营第25天回溯(分割)

回溯算法&#xff08;分割&#xff09; 131.分割回文串 力扣题目链接(opens new window) 题目 给定一个字符串 s&#xff0c;将 s 分割成一些子串&#xff0c;使每个子串都是回文串。 返回 s 所有可能的分割方案。 示例: 输入: “aab” 输出: [ [“aa”,“b”], [“a”,“…

免费的壁纸api

# 联想壁纸 from enum import Enumimport requestsclass LenovoTopHeadersTypePage(Enum):"""头部页面类型wallpaper 精选wallpaperHot 热门wallpaperRank 排行"""wallpaper wallpaperwallpaperHot wallpaperHotwallpaperRank wallpaperRankc…

【NEUQ1007】C基础-计负均正

C基础-计负均正 描述 从键盘输入任意20个整型数&#xff0c;统计其中的负数个数并求所有正数的平均值。 输入描述 从键盘输入20个整型数&#xff0c;以空格分隔。 输出描述 输出负数的个数和所有正数的平均值&#xff0c;保留两位小数。 示例 输入 1 2 3 4 5 6 7 8 9 …

【python从入门到精通】-- 第五战:函数大总结

&#x1f308; 个人主页&#xff1a;白子寰 &#x1f525; 分类专栏&#xff1a;python从入门到精通&#xff0c;魔法指针&#xff0c;进阶C&#xff0c;C语言&#xff0c;C语言题集&#xff0c;C语言实现游戏&#x1f448; 希望得到您的订阅和支持~ &#x1f4a1; 坚持创作博文…

《八》QSplitter拆分器以及QDockWidget窗口详解

QSplitter简介 QSplitter拆分器允许用户通过拖动子部件之间的边界来控制它们的大小。 单个拆分器可以控制任意数量的小部件。QSplitter的典型用法是创建几个小部件&#xff0c;并使用insertWidget()或addWidget()添加它们。 常用方法 默认情况下&#xff0c;QSplitter会动态…

Java学习笔记零基础入门1

目录 第一章 Java概述 1.1 什么是程序 1.2 Java 技术体系平台 1.3 Java 重要特点 1.4 Java 的开发工具 4.1 工具选择 1.5 Java 运行机制及运行过程 5.1 Java 语言的特点&#xff1a;跨平台性 5.2 Java 核心机制-Java 虚拟机 [JVMjavavirtual machine] 1.6 什么是JDK&…

Spring Boot + 事务钩子函数,打造高效支付系统!

今天&#xff0c;我继续安利一个独门绝技&#xff1a;Spring 事务的钩子函数。 单纯的讲技术可能比较枯燥乏味。 接下来&#xff0c;我将以一个实际的案例来描述Spring事务钩子函数的正确使用姿势。 一、案例背景 拿支付系统相关的业务来举例。在支付系统中&#xff0c;我们…

【WebSocket连接异常】前端使用WebSocket子协议传递token时,Java后端的正确打开方式!!!

文章目录 1. 背景2. 代码实现和异常发现3. 解决异常3.1 从 URL入手3.2 从 WebSocket子协议的使用方式入手&#xff08;真正原因&#xff09; 4. 总结&#xff08;仍然存在的问题&#xff09; 前言&#xff1a; 本篇文章记录的是使用WebSocket进行双向通信时踩过的坑&#xff0c…

flex吃干抹净

Flex 布局是什么&#xff1f; Flex 是 Flexible Box 的缩写&#xff0c;意为"弹性布局"&#xff0c;用来为盒状模型提供最大的灵活性。 .box{display: flex;//行内元素也可以使用flex布局//display: inline-flex; }display: flex; 使元素呈现为块级元素&#xff0c;…

蓝桥杯---数组分割

https://www.dotcpp.com/oj/problem3171.html 测试用例分析&#xff1a; 2 2 6 6 2 1 6 这代表有两个测试用例。 第一测试用例: 数组: [6, 6]长度: 2 分析 数组中的所有元素都是偶数&#xff0c;因此任意组合的和都将是偶数。可能的组合及其和&#xff1a; 空集: 和 0 …