Technology stack of the whole project
Build a development environment
linux operating system
I bought the Alibaba Cloud server directly without using a virtual machine.
Commonly used linux commands
View linux system
lsb_release -a
View operating system information
uname -a
View the linux kernel
Disk space check
df -TH
File related commands
mkdir test
create folder
touch a.txt
Create a file
vim a.txt
Start editing the file content (press i to start editing)
Press esc to exit edit mode, :wq to save: q! not to save
cat a.txt
View Files
echo ‘1111’ >> a.txt
Add content to the file
echo '1111' > a.txt
overwrites the file content
rm a.txt
delete file
rm -r test
delete folder
Compression and decompression command
tar -zcvf a.tar.gz a.txt
package file
tar -zxvf a.tar.gz
unzip files
view process
ps -ef | grep docker
View docker-related processes
More detailed explanation of linux commands
Address: https://umu5y0jdxn.feishu.cn/docs/doccnnqkYm0ry9T2jcy1enr4U8f#JSJIRI
Docker environment configuration
I have written two articles about docker and installing mysql and mogoDB with docker
address:
https://blog.csdn.net/hangao233/article/details/104395693
https://blog.csdn.net/hangao233/article/details/123294948?spm=1001.2014.3001.5501
Node.js configuration
Just download from the official website:
http://nodejs.cn/
my version
What are Nodes?
Like the browser environment, Node is a host environment for js, and both integrate V8 to compile js.
What can Node do?
The simplest thing that everyone has more contact with is the front-end infrastructure, because node has an interface that allows js to operate the operating system api. For example, npm install downloads the front-end package.
The BFF layer of large-scale website services, ssr, performs authentication and removes non-data processing requests for underlying services
For specific node explanation, you can read the article of the big guy:
https://juejin.cn/post/7091153253433999373
https://juejin.cn/post/7078924628525056007
https://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
The basic use of Node.js (I sorted out, the use of file modules and network modules and writing some simple interfaces)
https://blog.csdn.net/hangao233/article/details/122800483
https://blog.csdn.net/hangao233/article/details/122900473
Vs Code configuration
I use VS CODE, so I need to configure a lot of plugins.
If you don't know which plug-ins to use, you can take a look at Extension Pack, which contains many recommended plug-ins.
For example, if you use Vue, you can search for Vue Extension Pack in the plug-in store
Use Node.js to search Node Extension Pack
You can also use the plug-ins I installed, you need to install a Settings Sync.
Specific operation blog:
https://www.cnblogs.com/jiaoshou/p/13660972.html
Mock simulated data
Use mockjs to simulate here
Official website: http://mockjs.com/
download dependencies
npm i [email protected]
mockjs provides mock data
mock/mockServe.js
//先引入mockjs模块
import Mock from 'mockjs';
//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]
//webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json';
import floor from './floor.json';
//mock数据:第一个参数请求地址 第二个参数：请求数据
Mock.mock("/mock/banner", {
code: 200, data: banner });//模拟首页大的轮播图的数据
Mock.mock("/mock/floor", {
code: 200, data: floor });
api/ajaxMock.js
//对于axios进行二次封装
import axios from "axios";
import nprogress from "nprogress";
//如果出现进度条没有显示：一定是你忘记了引入样式了
import "nprogress/nprogress.css";
//底下的代码也是创建axios实例
let requests = axios.create({
//基础路径
baseURL: "/mock",
//请求不能超过5S
timeout: 5000,
});
//请求拦截器----在项目中发请求（请求没有发出去）可以做一些事情
requests.interceptors.request.use((config) => {
//现在的问题是config是什么?配置对象
//可以让进度条开始动
nprogress.start();
return config;
});
//响应拦截器----当服务器手动请求之后，做出响应（相应成功）会执行的
requests.interceptors.response.use(
(res) => {
//进度条结束
nprogress.done();
//相应成功做的事情
return res.data;
},
(err) => {
alert("服务器响应数据失败");
}
);
//最终需要对外暴露（不对外暴露外面模块没办法使用）
//这里的代码是暴露一个axios实例
export default requests;
api/index.js
import mockRequests from "./ajaxMock";
//获取banner（Home首页轮播图接口）
export const reqGetBannerList = () => mockRequest({
url: '/banner', method: 'get' });
//获取floor数据
export const reqFloorList = () => mockRequest({
url: '/floor', method: 'get' });
Store the requested data in vuex
store/home/index.js
//home模块的小仓库
import {
reqCategoryList, reqGetBannerList, reqFloorList } from '@/api';
//四大核心属性
//state：仓库数据的来源
const state = {
//商品分类的数据,这里初始化数据不能瞎写。看请求返回的结果
categoryList: [],
//轮播图的数据
bannerList: [],
//floor组件的数据
floorList: []
};
//mutations:唯一可以改变state数据地方
const mutations = {
GETCATEGORY(state, category) {
//修改state
state.categoryList = category;
},
GETBANNERLIST(state, bannerList) {
state.bannerList = bannerList;
},
GETFLOORLIST(state, floorList) {
state.floorList = floorList;
}
}
//actions:可以处理dispatch派发action地方，这里可以书写你的业务逻辑：for、if、异步语句等等
const actions = {
//获取商品分类的数据
async getCategory({
commit }) {
let result = await reqCategoryList();
// console.log(result);
if (result.code === 200) {
//提交mutation
commit("GETCATEGORY", result.data);
}
},
//获取首页轮播图的数据
async getBannerList({
commit }) {
let result = await reqGetBannerList();
if (result.code == 200) {
commit("GETBANNERLIST", result.data);
}
},
//获取floor数据
async getFloorList({
commit }) {
let result = await reqFloorList();
if (result.code == 200) {
//提交mutation
commit("GETFLOORLIST", result.data);
}
},
}
//getters：计算属性
const getters = {
};
export default {
state,
mutations,
actions,
getters
}
The carousel component ListContainer.vue component obtains the carousel data in the store. Since this data is obtained through an asynchronous request, we need to obtain the carousel map data through the calculated property computed.
ListContainer.vue code
<script>
import {
mapState} from "vuex";
export default {
name: "index",
//主键挂载完毕，请求轮播图图片
mounted() {
this.$store.dispatch("getBannerList")
},
computed:{
...mapState({
bannerList: (state) => state.home.bannerList
})
}
}
</script>
main.js
//引入MockServer.js----mock数据
import "@/mock/mockServe";
Put the pictures required by the mock data in the public folder! For example: the data of the carousel in listContainer.
When the public folder is packaged, the corresponding resources will be packaged into the dist folder intact
mockjs customize some data (no json)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="button" id="app">点击请求</button>
<script src="http://mockjs.com/dist/mock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script>
$('#app').click(function () {
$.ajax({
url: 'http://localhost:8085',
type: 'get',
dataType: 'json'
}).done(function (data, status, xhr) {
console.log(data, null, 2);
})
})
var obj = {
aa: '11', bb: '22', cc: '33', dd: '44'}
Mock.mock('http://localhost:8085', {
"user|1-3": [
{
"id|+1": 1,
name: "@cname",
"age|18-28": 0,
birthday: '@date("yyyy-MM-dd")',
city: "@city",
"fromObj|2": obj
}
]
})
</script>
</body>
</html>
