[JavaScript知识库]2021.8.1（1）

1、以下会打印：

new Vue({
? ? data: { a: 1, b: 2 },
? ? created: function () {
? ? ? ? console.log(this.a)
? ? },
? ? mounted(){
? ? ? ? console.log(this.b)
? ? }
})

A、1,2 B、2 C、1 D、2,1

C，mounted是挂载，里面没有实例挂不上去。

2，后台：app.js

var?express?=?require('express');

var?bodyParser?=?require('body-parser');

var?path?=?require('path');

var?router?=?require("./router.js")

var?app?=?express();

app.use(bodyParser.urlencoded({extended:false}));

app.use(bodyParser.json())

app.use("/node_modules",express.static(path.join(__dirname,'./node_modules')))

app.use(router)

app.listen(3000,function(){

????console.log('running');

})

goods.js

const?mongoose?=?require('mongoose');

mongoose.connect('mongodb://localhost/demo');

module.exports?=?mongoose.model('Good',?{

????goodsName:?String,

????goodsType:?String,

????money:?String,

????stockNum:?String,

????supplier:?String,

????warehousTime:?String

});

router.js

var?express?=?require('express');

var?Goods?=?require("./goods.js");

var?router?=?express.Router();

router.post("/goods/list",?function?(req,?res)?{

????let?page?=?req.body.page?||?1;

????let?size?=?req.body.size?||?10;

????Goods.find({},?function?(err,?data)?{

????????if?(err)?{

????????????return?res.status(200).json({

????????????????code:?3000,

????????????????flag:?false,

????????????????message:?'server?error'

????????????})

????????}

????????let?count?=?data.length;

????????Goods.find({}).skip((page?-?1)?*?parseInt(size)).limit(parseInt(size)).exec(function?(err,?goods)?{

????????????if?(err)?{

????????????????return?res.status(200).json({

????????????????????code:?3000,

????????????????????flag:?false,

????????????????????message:?'server?error,分页'

????????????????})

????????????}

????????????return?res.status(200).json({

????????????????code:?2000,

????????????????flag:?true,

????????????????message:?'查询成功',

????????????????data:?{

????????????????????total:?count,

????????????????????rows:?goods

????????????????}

????????????})

????????})

????})

})

module.exports?=?router

前台：goods.js

import?request?from?"../utils/request.js";

export?default{

????getData(page,size){

????????return?request({

????????????url:'/goods/list',

????????????method:'post',

????????????data:{

????????????????page,size

????????????}

????????})

????}

}

main.js

import?Vue?from?"vue";

import?App?from?"./App.vue";

import?router?from?"./router";

import?ElementUI?from?'element-ui';?//?组件库

import?'element-ui/lib/theme-chalk/index.css';?//?样式

Vue.config.productionTip?=?false;

Vue.use(ElementUI)

new?Vue({

??router,

??render:?(h)?=>?h(App),

}).$mount("#app");

Home.vue

<template>

??<div?class="home">

???

????<el-table

????:data="list"

????height="380"

????border

????style="width:?100%">

????<el-table-column

??????prop="goodsName"

??????label="商品名称"

??????>

????</el-table-column>

????<el-table-column

??????prop="goodsType"

??????label="商品类型"

??????>

????</el-table-column>

????<el-table-column

??????prop="money"

??????label="进货价格"

??????>

????</el-table-column>

????<el-table-column

??????prop="stockNum"

??????label="库存数量"

??????>

????</el-table-column>

????<el-table-column

??????prop="supplier"

??????label="供应商"

??????>

????</el-table-column>

????<el-table-column

??????prop="warehousTime"

??????label="入库时间"

??????>

????</el-table-column>

????

??</el-table>

??<el-pagination

??????@size-change="handleSizeChange"

??????@current-change="handleCurrentChange"

??????:current-page="currentPage"

??????:page-sizes="[10,?20,?30,?40]"

??????:page-size="pageSize"

??????layout="total,?sizes,?prev,?pager,?next,?jumper"

??????:total="total">

????</el-pagination>

??</div>

</template>

<script>

import?GoodsApi?from?'@/api/goods.js'

export?default?{

??data(){

????return?{

??????list:[],

??????currentPage:1,

??????pageSize:10,

??????total:0

????}

??},

??mounted()?{

????this.fetchData()

??},

??methods:?{

????fetchData(){

??????GoodsApi.getData(this.currentPage,this.pageSize).then(response=>{

????????const?resp?=?response.data;

????????this.list?=?resp.data.rows;

????????this.total?=?resp.data.total;

????????console.log(resp);

??????})

????},

?????handleSizeChange(val)?{

???????this.pageSize?=?val;

???????this.fetchData()

??????},

??????handleCurrentChange(val)?{

????????this.currentPage?=?val;

????????this.fetchData()

??????}

??},

};

</script>

index.js

import?Vue?from?"vue";

import?VueRouter?from?"vue-router";

import?Home?from?"../views/Home.vue";

Vue.use(VueRouter);

const?routes?=?[

??{

????path:?"/",

????name:?"Home",

????component:?Home,

??},

??{

????path:?"/about",

????name:?"About",

????//?route?level?code-splitting

????//?this?generates?a?separate?chunk?(about.[hash].js)?for?this?route

????//?which?is?lazy-loaded?when?the?route?is?visited.

????component:?()?=>

??????import(/*?webpackChunkName:?"about"?*/?"../views/About.vue"),

??},

];

const?router?=?new?VueRouter({

??mode:?"history",

??base:?process.env.BASE_URL,

??routes,

});

export?default?router;