仿掘金社区全栈项目开发(一)-搭建开发环境

整个项目的技术栈

搭建开发环境

linux操作系统

我是直接买的阿里云服务器，没有用虚拟机。

常用linux命令

查看linux系统

lsb_release -a

查看操作系统的信息

uname -a

查看linux内核

磁盘空间查看

df -TH

文件相关命令

mkdir test

创建文件夹

touch a.txt

创建文件

vim a.txt

开始编辑文件内容（按 i 开始编辑）

按 esc 退出编辑模式，:wq 保存 :q! 不保存

cat a.txt

查看文件

echo ‘1111’ >> a.txt

往文件内加内容

echo ‘1111’ > a.txt
覆盖文件内容

rm a.txt
删除文件

rm -r test

删除文件夹

压缩解压命令

tar -zcvf a.tar.gz a.txt

打包文件

tar -zxvf a.tar.gz

解压文件

查看进程

ps -ef | grep docker

查看 docker 相关的进程

linux命令更多详解

地址：https://umu5y0jdxn.feishu.cn/docs/doccnnqkYm0ry9T2jcy1enr4U8f#JSJIRI

Docker 环境配置

我之前写了两篇文章有关docker和用docker安装mysql，mogoDB

地址：

https://blog.csdn.net/hangao233/article/details/104395693

https://blog.csdn.net/hangao233/article/details/123294948?spm=1001.2014.3001.5501

Node.js配置

官网下载即可：

http://nodejs.cn/

我的版本

Node是啥？

Node跟浏览器环境一样，是js的一种宿主环境，两者都是集成V8来对js做编译。

Node可以做什么？

最简单的大家接触做多的就是前端的基建，因为node具备了让js进行操作系统api操作的接口。比如 npm install 下载前端的包。

大型网站服务的BFF层，ssr,做鉴权，为底层服务扛掉非数据处理的请求

具体node讲解可以看大佬的文章：

https://juejin.cn/post/7091153253433999373

https://juejin.cn/post/7078924628525056007

https://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

Node.js的基础使用（我整理的，文件模块和网络模块的使用和写一些简单的接口）

https://blog.csdn.net/hangao233/article/details/122800483

https://blog.csdn.net/hangao233/article/details/122900473

Vs Code 配置

我使用的是 VS CODE ，所以需要配置很多插件。

如果不知道用哪些插件， 可以看看 Extension Pack，里面有很多推荐的插件。

比如使用 Vue，就可以在插件商店搜 Vue Extension Pack

使用 Node.js 就搜 Node Extension Pack

也可以使用我装好的插件，需要安装一个 Settings Sync。

具体操作博客：

https://www.cnblogs.com/jiaoshou/p/13660972.html

Mock 模拟数据

在这里使用mockjs来模拟

官网：http://mockjs.com/

下载依赖

npm i mockjs@1.1.0

mockjs提供模拟数据

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' });

将请求来的数据存储到 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
}

轮播图组件ListContainer.vue组件在store中获取轮播图数据。由于在这个数据是通过异步请求获得的，所以我们要通过计算属性computed获取轮播图数据。

ListContainer.vue代码

 <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";

把mock数据需要的图片放置于public文件夹中！比如:listContainer中的轮播图的数据。

public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹中

mockjs 自定义一些数据（不用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>