Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use mock.js in a Vue project". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use mock.js in a Vue project".

Using mock.js in Vue projects

Development tool selection: Vscode

1. Use the command line to create a vue project (manually select Babel,Router,Vuex) 2. Import element-ui (for better display), enter npm I element-ui-S 3 on the command line. In main. Reference import ElementUI from 'element-ui' in js

Import 'element-ui/lib/theme-chalk/index.css';// style files must be introduced

Vue.use (ElementUI)

4. New src/views/main/List.vue uses custom column templates in elememnt-ui

{{scope.row.date}}

Name: {{scope.row.name}}

Address: {{scope.row.address}}

{{scope.row.name}}

Editing

Delete

Export default {

Data () {

Return {

TableData: [{

Date: '2016-05-02'

Name: Wang Xiaohu

Address: '1518 Lane, Jinshajiang Road, Putuo District, Shanghai'

}, {

Date: '2016-05-04'

Name: Wang Xiaohu

Address: '1517 Lane, Jinshajiang Road, Putuo District, Shanghai'

}, {

Date: '2016-05-01'

Name: Wang Xiaohu

Address: '1519 Lane, Jinshajiang Road, Putuo District, Shanghai'

}, {

Date: '2016-05-03'

Name: Wang Xiaohu

Address: '1516 Lane, Jinshajiang Road, Putuo District, Shanghai'

}]

}

}

Methods: {

HandleEdit (index, row) {

Console.log (index, row)

}

HandleDelete (index, row) {

Console.log (index, row)

}

}

}

The 5.router/index.js configuration is as follows: import Vue from 'vue'

Import VueRouter from 'vue-router'

/ / Import components

Import List from'.. / views/main/List.vue'

Vue.use (VueRouter)

Const routes = [

{

Path:'/

Name: 'List'

Component: List

}

]

Const router = new VueRouter ({

Routes

})

The web page of export default router now looks like this

5. Install mockjs and axiosnpm install-- save-dev mockjs

Npm install-save axios

one hundred and twenty six。 New api/getData.js and request.js

Request.js

Import axios from 'axios'

Const service = axios.create ({

BaseURL: "http://localhost:8080",

})

Export default service

12345

GetData.js

Import axios from'.. / request'

/ / data list API

Export const getList = () = > axios.get ("/ list")

1237. Create a new mock/mockServer.jsimport Mock from 'mockjs' under src

/ / import data from'. / data.json'

Mock.mock ('http://localhost:8080/list', {

Code: 0, data:

{

'data | 1000 million: [

{

Id:'@ id',// Random id

Name:'@ name',// random name

NickName:'@ last',// random nickname

Phone: / ^ 1 [34578]\ d {9} $/, / Random phone number

'age | 11-99 months: 1 dagger / age

Address:'@ county (true)', / / random address

Email:'@ email',// random mailbox

IsMale:'@ boolean',// random sex

CreateTime:'@ datetime',// creation time

Avatar () {

/ / user avatar

Return Mock.Random.image ('100x100, Mock.Random.color (),' # 75757575, 'png', this.nickName)

}

}

]

}

}) 8. Import mockServerimport'. / mock/mockServer'9 in main.js. Modify src/views/main/List.vue (data acquisition and binding, set table center)

{{scope.row.id}}

Name: {{scope.row.name}}

Address: {{scope.row.address}}

{{scope.row.name}}

Email: {{scope.row.email}}

Gender: {{scope.row.isMale}}

Nickname: {{scope.row.nickName}}

Mobile number: {{scope.row.phone}}

Avatar:

Editing

Delete

Import {getList} from ".. /.. / api/getData"

Export default {

Data () {

Return {

TableData: [

/ / {

/ / date: "2016-05-02"

/ / name: Wang Xiaohu

/ / address: "1518 Lane, Jinshajiang Road, Putuo District, Shanghai"

/ /}

/ / {

/ / date: "2016-05-04"

/ / name: Wang Xiaohu

/ / address: "1517 Lane, Jinshajiang Road, Putuo District, Shanghai"

/ /}

/ / {

/ / date: "2016-05-01"

/ / name: Wang Xiaohu

/ / address: "1519 Lane, Jinshajiang Road, Putuo District, Shanghai"

/ /}

/ / {

/ / date: "2016-05-03"

/ / name: Wang Xiaohu

/ / address: "1516 Lane, Jinshajiang Road, Putuo District, Shanghai"

/ /}

]

}

}

Methods: {

HandleEdit (index, row) {

Console.log (index, row)

}

HandleDelete (index, row) {

Console.log (index, row)

}

Async getMockList () {

Try {

Const result = await getList ()

/ / console.log (result)

If (result.data.code = = 0) {

This.tableData = result.data.data.data

}

/ / console.log (result.data.data.data)

} catch (error) {

Console.log (error)

}

}

}

Mounted () {

This.getMockList ()

}

}

Thank you for your reading, the above is the content of "how to use mock.js in Vue projects". After the study of this article, I believe you have a deeper understanding of how to use mock.js in Vue projects, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.