Now I have just contacted Express, please give me more advice if there is something wrong. Let’s get straight to the point.

Why should I use Express

Because it’s needed in the project. The project belongs to the map category, including uploading data, publishing layers, publishing services and other functions. After uploading data to do data editing, you can refer to mapBox secondary development. And this data re-edit feature can be used in other projects. Then it can be served with Express.

The following only records the flow:

Create Express

  • Create express-Demo empty folder, create Express project using Express Application Generator ()

  • npx express-generator

  • npm install

  • npm run start

  • Open http://localhost:3000/ and see

Express
Welcome to Express
Copy the code

That’s success!

Structure combing:

To access http://localhost:3000/ is to access routes/index.js

/* GET home page. */
router.get('/'.function(req, res, next) {
  res.render(                 ----1.
    'index', -2.
    { title: 'Express'} -3.
  );
});
Copy the code

He returns the index page, passing title as an argument. Open views/index.jade and you can see

extends layout

block content
  h1= title
  p Welcome to #{title}
Copy the code

The title binding is the parameter passed above. Bind in the page. So curious conch would like to ask why —-1. Would look for index in view, the answer lies in the 4 points in app.js that we have not mentioned.

· · · · · · · · · ·var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));         ------4.
app.set('view engine'.'jade');



app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public'))); ------5.· · · · · · · · · ·module.exports = app;

Copy the code

And we also saw that

app.use(express.static(path.join(__dirname, 'public'))); ------5.
Copy the code

It defines the path to our static files.

Create a Vue project

  • newvue-demo1An empty folder
  • Use the VUE-CLI installation modevue create vue-demo1, try to select router (do not select History mode), you can test the route later.
  • npm install
  • npm run server

Once the project is running, create vue.config.js in the root directory and set the package path to relative

module.exports = {
  publicPath: ". /"};Copy the code

Under the premise that the project can run successfully

  • npm run build

The generated dist folder will be used later

Vue and Express combined

Copy the contents in the dist folder generated by vue-demo1 project into the public/vue-demo1 folder of Express project (need to be created). Then copy the index-html file into views and rename it vue-demo1.jade.

Open the route/index, js, add the following code, on behalf of the http://localhost:3000/vue-demo1 return when we packed the vue project entry documents index. The HTML

router.get("/vue-demo1".function (req, res, next) {
  res.render("vue-demo1");
});

Copy the code

Good, we now open the browser, visit http://localhost:3000/vue-demo1, you can see the vue – not project. But this is just a Vue project, so we can create vuE-Demo2 again, and you can explore it for yourself. You can also set the router to History mode and try.