preface

From a macro perspective, this paper will describe the ability of full-stack development to full-stack development, and show a simple snippet of background development project, in which element- UI is used as background interface development framework, API design experience between front and back communication will be shared, and the use of proxy proxy service in VUe3.0 to solve cross-domain problems.

Project directory

First, create three project directories. Here, take ELE as an example to create front-end, back-end and back-end projects respectively.

Manage background page

<div class="login_page fillcontain"> <transition name="form-fade"> <section class="form_container form-fade-enter" V-show ="showLogin"> <div class="manage_tip"> <p> ELM </p> </div> <el-form :model="loginForm" :rules="rules" ref="loginForm"> <el-form-item prop="username"> <! -- two-way binding instruction --> <el-input V-model ="loginForm. Username "placeholder=" username" ></el-input> </el-form-item> <el-form-item prop="password"> <! Password "placeholder=" password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('loginForm')" class="submit_btn"> </el-button> </el-form-item> </el-form> </section> </transition> </div> </template> <script> export default { data() { return { showLogin: false, loginForm: { username: "", password: "" }, rules: { username: [ { required: true, message: "Please enter user name ", trigger: "blur"}], // Progressive password: [{required: true, message:" Please enter password ", trigger: "blur"}]}}; }, mounted() { this.showLogin = true; }}; </script> <style lang="stylus" scoped> .login_page { height: 100vh; background-color: #324057; } .manage_tip { position: absolute; width: 100%; top: -100px; left: 0; p { font-size: 34px; color: #ffffff; } } .form_container { width: 320px; height: 240px; position: absolute; top: 50%; left: 50%; margin-top: -120px; margin-left: -160px; padding: 25px; box-sizing: border-box; border-radius: 5px; text-align: center; background-color: #ffffff; .submit_btn { width: 100%; font-size: 16px; }} form-fade-enter-active,. Form-fade -leave-active {transition: all 1s; } .form-fade-enter, .form-fade-leave-active { transform: translate3d(0, -50px, 0); opacity: 0; } </style>Copy the code

Transtion is a built-in component of vue, which is triggered when its child elements change the value of v-show = “showLogin” false->true via the lifecycle function from never to display. Transtion’s name property will help us dynamically generate four classes, Transition-name-enter (one frame) -> transition-name-enter-active child element’s original style transition-name-enter not entered style Transition-name-enter-active Set transtion-time all 1s

Front and rear end intermodulation

methods: {
  async submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        // console.log(valid);
        if(valid) {// Communicate with the backend API, login}else {
          this.$notify.error({
            title: "Error",
            message: "Please enter the correct username and password.", offset: 100 }); }}); }},Copy the code

$notify is the message prompt component in element-UI, equivalent to $message in iView. Ref is equivalent to id attribute in Vue. Based on the concept of Domless, DOM operation is reduced in Vue to make development easier. Ref is used instead of id function.

Asynchronous Ajax requests

// API asynchronous Ajax request const res = await login({user_name: this.loginform. Username, password: this.loginform. PasswordCopy the code

This login, which comes from the API module, should be in the API to avoid collisions, so I need to import it here

import { login } from "@/api/getData";
Copy the code
/** * API defines collection file, * @param {*} data */export const login = (data) => {
  returnNew Promise((resolve, reject) => {// http://127.0.0.1:8080/ cross-project fetch('/api/admin/login', {
      method: 'POST'JSON ()). Then (data => data.json()). Then (data => {console.log(data,)).'-- -- -- -- -- -- -- -- -- --')
      resolve(data)
    })
    .catch(err => {
      console.log(err)
      reject(err)
    })
  })
}

Copy the code

Simulated mock

Write as much code as you can and reduce uncertainty

if (res.status == 1) {
    this.$message({
      type: "success",
      message: "Login successful"
    });
  } else {
    this.$message({
      type: "error",
      message: res.message
    });
  }
Copy the code

This status, it is convenience to get through Taiwan before and after, the appointment data interface, agreed the backend must return a status: 1 | 0, to verify that the communication front end is good. With this convention, you can handle the front-end business without waiting for the back-end projects to be written.

The back-end route is modular

const express = require('express'); const app = express(); // router = require(const router = require('./routes/index.js');
router(app);

// app.use()
app.listen("3000", () => {
  console.log('API server is online');
})
Copy the code

Child routing module

const admin = require('./admin') module. Exports = app = > {/ / enable routing/middleware/module zi lu by the app. Use ('/admin', admin)
}
Copy the code

Add a method to a route

Login Service Ignored

const express = require('express');
const router = express.Router();

router.post('/login', (req, res) => {
  res.send({
    status: 1,
    message: 'Login successful'
  })
})

module.exports = router

Copy the code

Cross-domain solutions

Vue3.0 provides this solution by creating a new vue.config.js in the background project root directory

module.exports = {
    devServer: {
      // '127.0.0.1:8080 / API/admin/login'
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:3000',
          changeOrigin: true, / / http://127.0.0.1:3000/admin/login pathRewrite: {'^/api': ' '
          }
        }
      }
    }
  }
  
Copy the code

Through proxy proxy, regular speed matching is used. If it is/API request, it will help us forward to port 3000, so that there is no cross-domain problem.

Write in the last

  • If there are any mistakes or shortcomings in this article, please point them out in the comments section.
  • Welcome everyone to like, pay attention to, technical exchange.