Build express backend framework in VSCode

I studied KOA before, and I studied express today.

Global installation

cnpm insatll express-generator -g

partial

express --view=ejs <项目名称>

Startup project

http://localhost:3000/

 If the above picture appears on the page, the backend project is successfully created

Solve cross-domain problems

The port of the front-end project is 8080

The port of the backend project is 3000

There will be cross-domain problems, the following is a way to solve cross-domain problems

Add the vue.config.js file in the project

let path=require("path");
module.exports={
    //代理
    devServer:{
        proxy:{
            '/api':{
                target:"http://localhost:3000",
                changeOrigin:true,
                pathRewrite:{
                    '^/api':"/api"
                }
            }
        },
    }
}

easy to use

At this time, the connection between the front and back ends should be normal. I will test it with a blind box mobile phone project I am doing.

Add a get request to the index.js file under the routes folder in the server (backend folder)

router.get("/api/index_list/0/data/1", function (req, res, next) {
  res.send({
    code: 0,
    data: {
      topBar :[
        { id: 0, label: "推荐" },
        { id: 1, label: "SP夜之城" },
        { id: 2, label: "SP改娃" },
        { id: 3, label: "MimiA" },
      
      ],
      data : [
        //这是swiper
        {
          id: 0,
          type: "swiperList",
          data: [
            { id: 0, imgUrl: "/images/swiper1.png" },
            { id: 1, imgUrl: "/images/swiper2.png" },
            { id: 2, imgUrl: "/images/swiper3.png" },
          
          ],
        },
        //这是swiper
        {
          id: 0,
          type: "swiperList",
          data: [
            { id: 0, imgUrl: "/images/swiper1.png" },
            { id: 1, imgUrl: "/images/swiper2.png" },
            { id: 2, imgUrl: "/images/swiper3.png" },
          ],
        },
        //这是icons
        {
          id: 1,
          type: "iconsList",
          data: [
            {
              id: 1,
              title: "雷娃改造",
              imgUrl: "/images/icons1.png",
            }
          ],
        },
        //爆款推荐
        {
          id: 2,
          type: "recommendList",
          data: [
            {
              id: 1,
              name: "Alika 四季有你",
              content: "Alika初代大娃 春夏秋冬",
              price: "65",
              imgUrl: "/images/recommend1.jpg",
            },
            {
              id: 2,
              name: "Alika 四季有你",
              content: "Alika初代大娃 春夏秋冬",
              price: "65",
              imgUrl: "/images/recommend1.jpg",
            }
          ],
        },
        //猜你喜欢
        {
          id: 3,
          type: "likeList",
          data: [
            {
              id: 1,
              imgUrl: "./images/like1.jpg",
              name: "Skullpanda改娃 游乐园迷镜 陶瓷感",
              price: 150,
            },
            {
              id: 2,
              imgUrl: "./images/like1.jpg",
              name: "Skullpanda改娃 游乐园迷镜 陶瓷感",
              price: 150,
            }
          ],
        },
      ],
  },
  });
});

It is used in the front-end folder, remember to install it when using axios

created() {
    axios({
      url: "/api/index_list/0/data/1",
    }).then((res) => {
      console.log(res);
    });
  },

If you get 200 OK as shown below, it is considered a success