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

创建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一起进步吧！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/555359.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【JavaEE多线程】Thread类及其常见方法（上）

【JavaEE多线程】Thread类及其常见方法（上）

系列文章目录 &#x1f308;座右铭&#x1f308;&#xff1a;人的一生这么长、你凭什么用短短的几年去衡量自己的一生&#xff01; &#x1f495;个人主页:清灵白羽 漾情天殇_计算机底层原理,深度解析C,自顶向下看Java-CSDN博客 ❤️相关文章❤️&#xff1a;清灵白羽 漾情天…
阅读更多...
类和对象（中）（构造函数、析构函数和拷贝构造函数）

类和对象（中）（构造函数、析构函数和拷贝构造函数）

1.类的六个默认成员函数 任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 //空类 class Date{}; 默认成员函数&#xff1a;用户没有显示实现&#xff0c;编译器会自动生成的成员函数称为默认成员函数 2.构造函数 构造函数 是一个 特殊的成员函数&a…
阅读更多...
接口自动化入门: Http请求的域名与IP地址概念！

接口自动化入门: Http请求的域名与IP地址概念！

在进行接口自动化测试时&#xff0c;经常需要与服务器进行通信&#xff0c;这就涉及到了使用Http协议发送请求。在发送请求时&#xff0c;我们需要指定目标服务器的域名或者IP地址。下面将从0到1详细介绍域名与IP地址的概念及其在接口自动化测试中的应用。 本文从5个方面来书写…
阅读更多...
3D可视化技术：研发基地的科技新篇章

3D可视化技术：研发基地的科技新篇章

在科技日新月异的今天&#xff0c;我们生活在一个充满无限可能性的时代。而在这个时代中&#xff0c;3D可视化技术正以其独特的魅力&#xff0c;引领着科技领域的新一轮变革。 3D可视化技术通过三维图像的方式&#xff0c;将现实世界或虚拟世界中的物体、场景等以立体、逼真的形…
阅读更多...
改进下记录学习的小网站

改进下记录学习的小网站

Strong改进 结束&#xff1a;2024-4-14 打算投入&#xff1a;10h 实际消耗&#xff1a;12h 3m 学习总是不在状态。 我的时间花得很零散&#xff0c;也有点茫然。所以想尝试一下集中式地、一块一块地花&#xff0c;比如投入30个小时&#xff0c;去干一件事&#xff0c;这样就可…
阅读更多...
npm怎么迁移到pnpm

npm怎么迁移到pnpm

下载的vue3模板用到了pnpm&#xff0c;就安装了一下 但是安装之后使用pnpm install 就发现包全被移动到ignored文件夹下面了,还报错 PS G:\Projects\gitProeject\TS_front> pnpm installWARN  Moving commitlint/config-conventional that was installed by a different …
阅读更多...
继电器会不会被淘汰？

继电器会不会被淘汰？

继电器作为一种电控制器件&#xff0c;其基本功能是在输入量达到一定条件时&#xff0c;使电气输出电路中的被控量发生预定的阶跃变化。 尽管现代电子技术发展迅速&#xff0c;新型产品不断涌现&#xff0c;但继电器因其独特的优势在许多应用领域仍然不可替代。 技术优势&#…
阅读更多...
git 删除本地分支 删除远程仓库中的分支

git 删除本地分支 删除远程仓库中的分支

语法&#xff1a; 删除本地分支 git branch -D <分支名>删除远程分支 git push <remote名称> <分支名> --delete 示例&#xff1a; 删除本地分支 git branch -D feature/test_listview删除远程分支 git push origin feature/test_listview --delete 两个…
阅读更多...
FebHost：谁可以注册.CA加拿大域名？

FebHost：谁可以注册.CA加拿大域名？

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

实战1-批量爬取百度图片（上）

任务需求&#xff1a;输入关键字下载100个图片保存到本地&#xff0c;每个关键字单独存放一个文件夹&#xff08;GUI版&#xff09; 任务描述&#xff1a;当输入关键字时会爬取100个与关键词有关的图片到本地每个关键词单独保存到一个文件夹中&#xff0c;比如说我输入黑客下载…
阅读更多...
Arduino源代码(ino)在Proteus中调试总结

Arduino源代码(ino)在Proteus中调试总结

一、前言 基于BluePill Plus开发板&#xff08;该板是毕设网红板&#xff09; BluePill Plus / WeAct Studio 微行工作室 出品 BluePill-Plus/README-zh.md at master WeActStudio/BluePill-Plus GitHub 首页-WeAct Studio-淘宝网 (taobao.com) 在Proteus中对应的例子是&…
阅读更多...
windows下安装kibana

windows下安装kibana

下载&#xff1a;https://www.elastic.co/cn/downloads/kibana 安装&#xff1a;https://www.elastic.co/guide/cn/kibana/current/install.html 安装好后&#xff0c;cd到kibana的bin目录&#xff0c;启动kibana.bat 然后访问localhost:5601
阅读更多...
链表（C语言）

链表（C语言）

前言&#xff1a;前面几篇文章我们详细介绍了顺序表&#xff0c;以及基于顺序表来实现的通讯录。今天我们连介绍一下链表的下一个结构链表。那么链表和顺序表究竟有什么区别呢&#xff1f;他们两个的优缺点分别是什么。今天这篇文章就带大家了解一下链表。 目录 一.链表的概念…
阅读更多...
前端三大件速成 01 HTML

前端三大件速成 01 HTML

文章目录 一、前端基础知识二、标签1、什么是标签2、标签的属性3、常用标签&#xff08;1&#xff09;声明&#xff08;2&#xff09;注释&#xff08;3&#xff09;html 根标签&#xff08;3&#xff09;head标签&#xff08;4&#xff09;body标签 三、特殊字符四、其他标签1…
阅读更多...
202462读书笔记|《一世珍藏的诗歌200首》——你曾经羞赧地向我问起， 是谁最早在此留下足印

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

202462读书笔记|《一世珍藏的诗歌200首》——你曾经羞赧地向我问起&#xff0c; 是谁最早在此留下足印 《一世珍藏的诗歌200首》作者金宏宇&#xff0c;很多美好的诗&#xff0c;有徐志摩&#xff0c;戴望舒&#xff0c;林徽因&#xff0c;舒婷等的诗精选&#xff0c;很值得一读…
阅读更多...
变配电场所智能综合监控系统无人化与自动化升级改造

变配电场所智能综合监控系统无人化与自动化升级改造

一 项目背景 国家电力建设飞速发展,为了提高管理水平,智能化建设迫在眉睫。变配电场所作为电网中的核心单元,数量巨大,是智能化建设的中坚部分。但由于变配电场所分布的地理位置过于分散&#xff0c;且配电网的自动化水平有待提高,单纯依靠人力来对变配电场所进行巡视,不仅增加…
阅读更多...
Leo赠书活动-24期 【三大层次学习企业架构框架TOGAF】文末送书

Leo赠书活动-24期 【三大层次学习企业架构框架TOGAF】文末送书

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 赠书活动专栏 ✨特色专栏&#xff1a;…
阅读更多...
【网站项目】自习室预约系统

【网站项目】自习室预约系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
基于Springboot+Vue的Java项目-企业客户管理系统开发实战(附演示视频+源码+LW)

基于Springboot+Vue的Java项目-企业客户管理系统开发实战(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…
阅读更多...
【Python】OPC UA模拟服务器实现

【Python】OPC UA模拟服务器实现

目录 服务器模拟1. 环境准备2. 服务器设置3. 服务器初始化4. 节点操作5. 读取CSV文件6. 运行服务器 查看服务器客户端总结 在工业自动化和物联网&#xff08;IoT&#xff09;领域&#xff0c;OPC UA&#xff08;开放平台通信统一架构&#xff09;已经成为一种广泛采用的数据交换…
阅读更多...
最新文章

Copyright @ 2022~2023