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

news2024/11/23 19:14:24

创建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.coloradmin.cn/o/1605283.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[Vision Board创客营]学习片上Flash移植FAL

[Vision Board创客营]学习片上Flash移植FAL

文章目录 [Vision Board创客营]学习片上Flash移植FAL介绍环境搭建使用组件测试porbeerasewriteread 结语 [Vision Board创客营]学习片上Flash移植FAL 水平较菜&#xff0c;大佬轻喷。&#x1f630;&#x1f630;&#x1f630; 介绍 &#x1f680;&#x1f680;Vision-Board 开…
阅读更多...
解锁流量密码：如何利用HubSpot打造高效的获客策略？（下）

解锁流量密码：如何利用HubSpot打造高效的获客策略？（下）

在当今数字化时代&#xff0c;流量是企业成功的关键。HubSpot作为一款全面的营销自动化工具&#xff0c;为我们提供了强大的支持&#xff0c;帮助企业打造高效的流量获取策略。接下来&#xff0c;我们将从社交媒体与SEO优化、自动化营销流程、数据分析与效果评估以及流量获取策…
阅读更多...
【R语言】组合图：散点图+箱线图+平滑曲线图+柱状图

【R语言】组合图：散点图+箱线图+平滑曲线图+柱状图

用算数运算符轻松组合不同的ggplot图&#xff0c;如图&#xff1a; 具体代码如下&#xff1a; install.packages("devtools")#安装devtools包 devtools::install_github("thomasp85/patchwork")#安装patchwork包 library(ggplot2) library(patchwork) #p1是…
阅读更多...
Linux进程和任务管理

Linux进程和任务管理

目录 一.程序和进程的关系 程序 进程 线程 线程与进程的区别 二.查看进程信息ps 方法一 常用选项 方法二 三.TOP动态查看进程信息 进程信息区各列解释 top常用命令 系统查看命令总结 查看进程信息pgrep 查看进程树pstree 四.控制进程 进程的启动方式 进程的前…
阅读更多...
electron的webview和内嵌网页如何通信

electron的webview和内嵌网页如何通信

在 Electron 的世界里&#xff0c;webview 标签相当于一个小盒子&#xff0c;里面可以装一个完整的网页&#xff0c;就像一个迷你浏览器。当你想和这个小盒子里的内容说话时&#xff08;也就是进行通信&#xff09;&#xff0c;这里有几个方法可以帮你做到&#xff1a; 这里只写…
阅读更多...
LIUNX文件系统

LIUNX文件系统

目录 1.磁盘的物理结构 2.CHS定位法 3.磁盘的逻辑存储 4.系统层面 inode.block[15] 创建文件的流程 查找文件的流程 了解文件系统&#xff0c;首先要了解磁盘是如何存储和读取数据的。 1.磁盘的物理结构 可以理解这个盘上有很多的小磁铁&#xff0c;通过旋转盘面和摆动…
阅读更多...
LeetCode-热题100：114. 二叉树展开为链表

LeetCode-热题100：114. 二叉树展开为链表

题目描述 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例…
阅读更多...
内业减少80%人工操作，林地地形轻松测！

内业减少80%人工操作，林地地形轻松测！

林业作为维护生态平衡和保护环境的关键领域&#xff0c;其科学管理和合理利用是当前林业工作的重中之重。林业调查旨在全面了解当前林业资源的状况&#xff0c;其中林地地形测量是林业调查的基础工作。通过对林地地形的准确测量&#xff0c;可获取森林的地理位置、面积、地貌、…
阅读更多...
探索VR数字展厅，对企业未来展示新模式

探索VR数字展厅，对企业未来展示新模式

在数字化浪潮的推动下&#xff0c;企业展示也在经历着一场革命&#xff0c;VR数字展厅正在以一种全新的方式重塑我们的生活和工作空间&#xff0c;不仅重塑了客户的观展体验&#xff0c;也为企业营销打开了新的渠道。 VR数字展厅作为实体展厅的数字化延伸&#xff0c;正以其沉浸…
阅读更多...
C++笔记：引用

C++笔记：引用

目录 概念&#xff1a; ​编辑 引用的特性&#xff1a; 引用中的权限问题&#xff1a; 引用与指针的区别&#xff1a; 引用的使用&#xff1a; 概念&#xff1a; 引用是给已存在变量取一个别名&#xff0c;编译器不会为引用变量开辟内存空间。 引用的符号&#xff1a;&…
阅读更多...
物联网网络传输，STM32和ESP32

物联网网络传输，STM32和ESP32

2024.4.17 今天主要是记录一下我这个STM32F407和esp8266组成的互联网板子的一些例程运行心得&#xff0c; 下面这个例程是STM32发AT指令给esp8266&#xff0c;使得esp8266作为tcp client连接到我的手机热点&#xff0c;然后我用电脑连接wifi&#xff0c;打开tcp server&#x…
阅读更多...
上海晋名室外气瓶暂存柜海盐项目落地

上海晋名室外气瓶暂存柜海盐项目落地

上周海盐县人民医院武原分院的SAVEST室外气瓶暂存柜项目成功交付验收&#xff0c;此次项目主要用于医院气瓶等室外暂存安全。 用户单位在日常工作运营中涉及到氧气瓶、杜瓦罐等室外安全储存问题&#xff0c;用户在寻找解决方案的过程中搜索到上海晋名的室外气瓶暂存柜系列后挺感…
阅读更多...
贪心问题：134. 加油站

贪心问题：134. 加油站

https://leetcode.cn/problems/gas-station/ 贪心算法还没找到规律&#xff0c;记录一下该题的思路吧。。。 每个加油站的剩余量rest[i]为gas[i] - cost[i]。 首先如果总油量减去总消耗大于等于零那么一定可以跑完一圈&#xff0c;说明 各个站点的加油站 剩油量rest[i]相加一定…
阅读更多...
【AI学习中常见专业英文缩写词的解释】

【AI学习中常见专业英文缩写词的解释】

前言&#xff1a; 为了看着不无聊&#xff0c;文中插入了一些AI生成的狗图片 AI(Artificail Intelligence)人工智能&#xff1a; 让机器模拟和展示人类智能的技术。 GAI(Generative Artificail Intelligence)生成式人工智能: 利用复杂的算法、模型和规则&#xff0c;从大规…
阅读更多...
19.leetcode---设计循环队列(Java版)

19.leetcode---设计循环队列(Java版)

题目链接:https://leetcode.cn/problems/design-circular-queue/ 题解: 代码: 测试:
阅读更多...
LeetCode 506.和为K的子数组

LeetCode 506.和为K的子数组

目录 题目描述 方法一 三重循环暴力 思路&#xff1a; 代码&#xff1a; 方法二 暴力一点点前缀和 思路&#xff1a; 代码&#xff1a; 方法三 前缀和哈希表 思路&#xff1a; 代码&#xff1a; 题目描述 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并…
阅读更多...
超净实验室用耐强酸碱耐高温PFA酸缸进口透明聚四氟塑料方槽

超净实验室用耐强酸碱耐高温PFA酸缸进口透明聚四氟塑料方槽

PFA清洗槽是四氟清洗桶后的升级款&#xff0c;主要用于半导体光伏光电等行业&#xff0c;一体成型&#xff0c;无需担心漏液&#xff0c;表面光滑无毛刺。 别名PFA浸泡桶、PFA酸缸、PFA方槽等&#xff0c;可定制尺寸&#xff0c;可配套盖子&#xff0c;盖子有PFA/PTFE两种材质…
阅读更多...
idea连接Docker数据库

idea连接Docker数据库

我们在docker下创建了数据库&#xff0c;想要更方便的查看和操作该数据库&#xff0c;idea和DataGrip或者其他人家都可以。在数据库连接时需要填写数据库名字&#xff0c;主机&#xff0c;端口&#xff0c;数据库用户名和密码。 输入之后先不要点击OK和按Enter键&#xff0c;我…
阅读更多...
HubSpot流量开发常见问题及解决方案

HubSpot流量开发常见问题及解决方案

在HubSpot流量开发过程中&#xff0c;企业和营销团队可能会遇到一系列问题。本文旨在梳理这些常见问题&#xff0c;并提供相应的解决方案&#xff0c;帮助大家顺利推进HubSpot流量开发项目。 一、数据集成问题 问题&#xff1a;如何将外部数据源与HubSpot集成&#xff0c;实现…
阅读更多...
SIDE：多维赋能，助力高效开发且获得收益

SIDE：多维赋能，助力高效开发且获得收益

在当下数字化快速发展的时代&#xff0c;SIDE这款应用开发平台确实展现出了其前瞻性和实用性。昨天我们介绍了SIDE作为一款先进的应用开发平台&#xff0c;开启研发新的颠覆式的开发新纪元。除了开发体验外&#xff0c;SIDE还以其多维度的赋能手段&#xff0c;为开发者提供了高…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023