38, Vue project | user management system (Part I)

@Author: Runsen
@Date: 2020/7/7

The most important thing in life is not where you stand, but the direction your heart is heading. As long as I write my own experience in each blog post and cultivate my body and mind; In the daily repeated learning, you can endure loneliness, practice real skills, bravely move forward without fear of difficulties, never forget your original intention, forge ahead, and you will surely gain something in life without regret (author: Runsen)

Runsen is currently in the second semester of his junior year, majoring in chemical engineering and technology. He is addicted to Japanese, Python, Java and a series of data analysis software. Leading to serious class skipping, and the professional ranking is in the middle and bottom I spent 60% of my time in CSDN. Decide to work harder today than yesterday. My journey is the sea of stars!

Today's college entrance examination, I was a spicy chicken in those days, and I am still a spicy chicken now. I wish all Tsinghua and Peking University in the college entrance examination

The user management system is completed as a Vue project for review.

Install JSON server

JSON server is actually a JSON server that tests some business logic.

GIthub link for JSON server: https://github.com/typicode/json-server .

Install JSON server: NPM install -g JSON server

Create a new JSONSERVER folder and create a db JSON, as follows.

{
  "users": [
    {
      "name": "Runsen",
      "phone": "13717378202",
      "email": "2953510364@qq.com",
      "education": "undergraduate course",
      "graduationschool": "Dongguan spicy chicken College",
      "profession": "chemical industry",
      "profile": "The most important thing in life is not where you stand, but the direction your heart is heading. As long as I write my own experience in each blog post and cultivate my body and mind; In the daily repeated learning, you can endure loneliness, practice real skills, bravely move forward without fear of difficulties, never forget your original intention, forge ahead, and you will certainly gain something in life without regret",
      "id": 1
    },
    {
      "name": "adfasdf",
      "phone": "fasdfasfd",
      "email": "asdfasfd",
      "education": "fasdfasfd",
      "graduationschool": "fasfasdf",
      "profession": "sdfasdfafd",
      "profile": "asdfasdf",
      "id": 2
    },
    {
      "name": "Future girlfriend",
      "phone": "I don't know",
      "email": "I don't know",
      "education": "I don't know",
      "graduationschool": "I don't know",
      "profession": "I don't know",
      "profile": "I don't know",
      "id": 3
    }
  ],
  "companies": [
    {
      "id": 1,
      "name": "Apple",
      "description": "Apple is good!"
    },
    {
      "id": 2,
      "name": "Microsoft",
      "description": "Microsoft is good!"
    },
    {
      "id": 3,
      "name": "Google",
      "description": "Google is good!"
    }
  ]
}

Start JSON server, JSON server db JSON

access http://localhost:3000/ , you can view the homepage of JSONSERVER.

The following are some API s for testing JSONSERVER. Some fields are missing.

// Get all user information
http://localhost:3000/users

// Get the user information with id 1
http://localhost:3000/users/1

// Get all information about the company
http://localhost:3000/companies

// Get information about a single company
http://localhost:3000/companies/1

// Get all users with company id 3
http://localhost:3000/companies/3/users

// Get information by company name
http://localhost:3000/companies?name=Microsoft

// Get company information by multiple names
http://localhost:3000/companies?name=Microsoft&name=Apple

// Get only two pieces of data in a page
http://localhost:3000/companies?_page=1&_limit=2

// Ascending sort asc ascending desc descending
http://localhost:3000/companies?_sort=name&_order=asc

// Access to
http://localhost:3000/users?age_gte=30

// Acquisition age between 30 and 40
http://localhost:3000/users?age_gte=30&age_lte=40

// Search user information
http://localhost:3000/users?q=Runsen

But because json server db json is to run a json. For many times, it is to run a project

The above scripts are the results of my modification. Here --watch db JSON needs to specify db JSON

"scripts": {
  "json:server": "json-server --watch db.json",
  "json:server:remote": "json-server http://jsonplaceholder.typicode.com/db"
  
},

Execute npm run json:server to replace the JSON server db JSON

Create Vue project

Next, we create a Vue project to interface with the API in JSONSERVER. Create a project through vue init webpack customers. The webpack will be packaged in a later series.

The file structure is as follows.

Vue defaults to port 8080. After it is turned on, it is a small rocket. In app Log off at the beginning of Vue.

Because you need to write components later, you need to modify the vscode configuration file setting JSON add

  "vetur.experimental.templateInterpolationService": false,
  "vetur.validation.template": false,
  "vetur.validation.style": false,
  "vetur.validation.script": false,

Otherwise, if a red tilde appears after the component is written, it will report expected Vetur (1005), and then restart vscade.

Index HTML add link

Because bootstrap needs to be used in the component template, you need to add bootstrap Js CSS, jq and bootstrap JS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vcustomers</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Component authoring

Next, we need to write two components, one is about Vue, one is customers Vue

About The code of Vue is as follows. The code here is from helloworld Vue is copied from. about container is the bootstrap class name, which is used for centering.

<template>
  <div class="about container">
    About Runsen
  </div>
</template>

<script>
export default {
  name: 'about',
  data() {
    return {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Customers The code of Vue is as follows. The code here is from helloworld Copied from Vue, page header and table striped are bootstrap class names, that is, a header and a table.

<template>
  <div class="customers container">
    <h1 class="page-header">User management system</h1>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>name</th>
          <th>telephone</th>
          <th>mailbox</th>
          <th></th>
        </tr>
      </thead>
      <tbody v-for="customer in customers">
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  name: 'customers',
  data() {
    return {
      customers :[]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

main.js

Main JS needs to reference VueRouter, but I did not select yes when creating the project. I can use NPM install Vue router to import the following code

import VueRouter from 'vue-router'
Vue.use(VueRouter)

In the template, the navigation bar in the bootstrap is imported. For the link: view source: https://v3.bootcss.com/examples/starter-template

Main JS complete code

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Customers from './components/Customers.vue'
import About from './components/About.vue'
Vue.config.productionTip = false
Vue.use(VueRouter)

// Set up routes. Each route should map a component.
const router = new VueRouter({
  mode:"history",
  base: __dirname,
  routes:[
    {path:'/',component:Customers},
    {path:'/about',component:About}
  ]

})

/* eslint-disable no-new */
new Vue({
  router,
  template: `
	<div id="app">
		 <nav class="navbar navbar-default">
	      <div class="container">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
	          <a class="navbar-brand" href="#"> user management system</a>
	        </div>
	        <div id="navbar" class="collapse navbar-collapse">
	          <ul class="nav navbar-nav">
	            <li><router-link to="/">homepage</router-link></li>
	            <li><router-link to="/about">About us</router-link></li>
	          </ul>

	          <ul class="nav navbar-nav navbar-right">
	            <li><router-link to="/add">Add user</router-link></li>
	          </ul>
	        </div><!--/.nav-collapse -->
	      </div>
	    </nav>
		<router-view></router-view>
	</div>
  `
}).$mount("#app")

Finally, run the project through npm run dev. the specific effects are as follows.

Tags: Vue.js Vue

Posted by ashz on Mon, 30 May 2022 20:16:00 +0530