1, Integrate the basic templates provided by element UI into the workspace
vue-element-admin It is a set of background management system integration scheme based on element UI
Integration scheme GitHub address: https://github.com/PanJiaChen/vue-element-admin
Basic template GitHub address: https://github.com/PanJiaChen/vue-admin-template
1. Unzip the compressed file Vue admin template master to the workspace
2. Download the required dependencies according to package.json in Vue admin template master: npm install
3. Lower the NPM version NPM install by relying on those that cannot be downloaded npm@6.14.10 -g
4. Node sass problem: NPM I - G node sass -- sass_ binary_ site= https://npm.taobao.org/mirrors/node-sass/
5. Start the built front-end project: npm run dev, and the browser will pop up and access it automatically http://loaclhost;9528/
6. The integration is successful when you can see the following login page
2, Set up the front page of the hospital setting interface
1. Add a hospital setting route: src/router/index.js
2. Create a jump page and set the jump path: src/views/hospitalSet/ list.vue and add.vue
3. Create a JS file in the api folder and define the interface path: hospitalSet.js
4. Introduce js files into the page, use axios to call the interface, and display the returned data of the interface on the page: complete in list.vue and add.vue
1. Add hospital setting route index.js
//1. Add route
{
path: '/hospitalSet', //First layer path
component: Layout,
redirect: '/hospitalSet/list',
name: 'Hospital setting management',
meta: { title: 'Hospital setting management', icon: 'el-icon-s-help' }, //Icon is the icon displayed in front of the list
children: [
{
path: 'list', //Second layer path, list function
name: 'Hospital settings list',
component: () => import('@/views/hospitalSet/list'), //2. Set the path of the jump page. Import is the path of the import page
meta: { title: 'Hospital settings list', icon: 'table' }
},
{
path: 'add',
name: 'Hospital settings add',
component: () => import('@/views/hospitalSet/add'),
meta: { title: 'Hospital settings add', icon: 'tree' }
}
]
},
2. Create a hospital setting list and jump to the page list.vue
<template>
<div class="app-container">
Hospital settings list
</div>
</template>
<script>
//Import js file of interface definition
import { hospitalSet } from '@/api/hospitalSet' //Don't recognize. / only recognize @ /, and don't write. js at the end
export default{
//Define variables and initial values
data(){
return{
current:1, //Current page
limit:3, //Records per page
searchObj:{}, //Conditional encapsulation object
list:[] //The data set of each page is stored in the array for display after getting the data
}
},
//It is executed before page rendering. Generally, it calls the methods defined in methods to obtain data for later rendering
created(){
this.getHospitalSetList() //this indicates the current vue range
},
//Define a method to call the request interface
methods:{
//Hospital settings list
getHospitalSetList(){
//Call the getHospitalSetList method of the referenced @ / api/hospitalSet
hospitalSet.getHospitalSetList(this.current,this.limit,this.searchObj)
.then(response => { //The request is successfully called, and the response is the data returned by the interface
console.log(response)
})
.catch(error => { //If the request fails to call, error is the returned error information
console.log(error)
})
}
}
}
</script>
3. Create a hospital setting add jump page add.vue
4. Define the interface path hospitalSet.js
Create the hospitalSet.js file in the project src/api and add the following code
Interface path (find the path in the back-end controller, @ RequestMapping/@PostMapping)
Use the template string backquote ${} backquote to fetch the required parameters
At the front end, when it is necessary to transfer data in json form, the writing method "data: object name" is fixed in the framework
import request from '@/utils/request' //In this, axios is encapsulated and can be directly introduced
//Create js file in api folder, carry out ES6 modular development specification, and define interface path
export function getHospitalSetList(current,limit,searchObj) { //The required contents of the path are passed into the interface as parameters, current page, limit the number of records per page, and searchObj condition object
return request({
url: `/admin/hosp/hospitalSet/findPageHospitalSet/${current}/${limit}`, //Interface path (find the path in the back-end controller, @ RequestMapping/@PostMapping)
method: 'post', //Submission method / / use the template string ` ${} 'to retrieve the required parameters
data: searchObj //Parameter, because the backend uses @ ResponseBody (passed in JSON form)
}) //At the front end, when data needs to be transferred in json form, the writing method "data: parameter name to be transferred" is fixed in the framework
//data: searchObj indicates that the object searchObj will be passed to the back-end interface in json format
}
Modify Vue of. env.development_ APP_ BASE_ API = '/'
5. Test
Test the backend and access http://localhost:8201/swagger-ui.html, test condition query with paging interface
Test the front end and run npm run dev
If no error is reported, the detected object can be seen
If you report an error, look below
The browser console will report an error. Access control allow origin is a cross domain problem
Different cross domain access protocols, access addresses and port numbers will be generated in the three places
Access protocol: http and https, access addresses 192.128.1.1 and 172.11.1.1, port numbers 9528 and 8201
To solve the cross domain problem, the last request to send is: http://localhost:8201/admin/hosp/hospitalSet/findPageHospitalSet/1/3
1. Modify. env.development and. env.production
VUE_APP_BASE_API = '/'
2. Modify the port number in vue.config.js
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: "http://localhost:8201",
ws: true,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
//before: require('./mock/mock-server.js')
},