最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了。demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求,一个用作后端发送。

双服务的配置方法在 build / webpack.dev.conf.js 中写入。

在安装成功 vue 后,是仅有一个 端口为 8080 的服务,默认的服务名称为:devServer,为了满足两个服务的需求,需要在这个文件中再配一个服务,服务名称为 : api-server

const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool, // these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})

api-server 的服务需要用到 express / body-parser / fs,除了 express 不用安装外,还需要安装 body-parser / fs

npm install body-parser
npm i fs

服务端的配置文件在 devServer 服务结束后:

/**新配置的 api-server,用来使用 axios 分页获取数据
*
* 1.需要使用 express 来新建并启动服务,需要安装 express / body-parser / fs /
* 2.port 的设置从 PORT || config.dev.port 中解析,因为 port 的解析存在于 config/index.js的 dev 中
* 3.数据的地址通过 readFile()读取,数据目录同 src 同级
* 4.api-server 的请求地址为:http://localhost:8081/api/shop?page=1 必须加参数 page ,否则获取不到数据
*
* 5.请求的端口号为 8080 ,服务端的端口号为 8181
*/
const express=require('express')
const apiServer = express()
const bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
const apiRouter = express.Router()
const port = PORT || config.dev.port
const fs = require('fs')
apiRouter.route('/:apiName')
.all(function (req, res) {
var page=req.query.page;
//请求的数据地址
fs.readFile('./db/data.json', 'utf8', function (err, data) {
// if (err) throw err
var data = JSON.parse(data)
if (data[req.params.apiName]) {
var result=data[req.params.apiName];
//newData 为请求数据的参数
var newData=result.slice((page-1)*10,page*10);
res.json(newData);
}
else {
res.send('no such api name')
}
})
}) apiServer.use('/api', apiRouter);
apiServer.listen(port + 1, function (err) {
if (err) {
console.log(err)
return
}
//dev-server默认端口为8080,因此新建的server,端口号 +1 ,不会冲突
console.log('Listening at http://localhost:' + (port + 1) + '\n')
});

当服务配置好后,需要重启 npm run dev.

当前的请求端口为8080,而服务端的端口为8081,如果直接用下面的地址请求,无疑会发生跨域而请求失败:

const url = "http://localhost:/api/shop?page=";

解决跨域的办法是,在 config / index.js / dev 的 proxyTable 对象中设置代理。当通过 8080 请求数据 /api/ 时,通过它指向数据来源 8081。

dev: {

    // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
//设置代理,当请求 /api/ 时,指向 8081
proxyTable: {
'/api/':'http://localhost:8081/'
},
}

重新启动服务:npm run dev,再次请求

http://localhost:8080/api/shop?page=1 时,就可以摸拟请求而获取到第1页的数据:
export default {
data () {
return {
list: [],
page:0
}
},
mounted(){
//结构加载完后,这里写请求数据的方法
this.page++;
axios.get(url + this.page).then(res=>{
console.log('shopList=' + res.data)
this.list = res.data;
})
}
}

完。

在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求的更多相关文章

  1. android项目中配置NDK自动编译生成so文件

    1 下载ndk开发包   2 在android 项目中配置编译器(以HelloJni项目为例)  2.1 创建builer  (a)Project->Properties->Builder ...

  2. ckeditor编辑器在java项目中配置

    一.基本使用: 1.所需文件架包 A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip 下载地址:http://ckeditor.com/download 2.配置使用 A.将 ...

  3. C# 在项目中配置Log4net

    我们介绍一下在项目中配置log4net,是Apache基金会旗下的. 无论在什么环境中,配置log4net的逻辑都一样. 1)文件配置 首先在项目加载文件中,配置log4net加载项. 在Web项目中 ...

  4. WebCollector2.7爬虫框架——在Eclipse项目中配置

    WebCollector2.7爬虫框架——在Eclipse项目中配置 在Eclipse项目中使用WebCollector爬虫非常简单,不需要任何其他的配置,只需要导入相关的jar包即可. Netbea ...

  5. 在maven项目中 配置代理对象远程调用crm

    1 在maven项目中配置代理对象远程调用crm 1.1 在项目的pom.xml中引入CXF的依赖 <dependency> <groupId>org.apache.cxf&l ...

  6. web项目中配置多个数据源

    web项目中配置多个数据源 spring + mybatis 多数据源配置有两种解决方案 1.配置多个不同的数据源,使用一个sessionFactory,在业务逻辑使用的时候自动切换到不同的数据源,  ...

  7. 如何在web项目中配置Spring的Ioc容器

    在web项目中配置Spring的Ioc容器其实就是创建web应用的上下文(WebApplicationContext) 自定义要使用的IoC容器而不使用默认的XmlApplicationContext ...

  8. Spring-Boot项目中配置redis注解缓存

    Spring-Boot项目中配置redis注解缓存 在pom中添加redis缓存支持依赖 <dependency> <groupId>org.springframework.b ...

  9. 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表

    在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...

随机推荐

  1. C# 设置Excel中的数字字符串格式

    在Excel中,数字字符串用不同格式表示,可代表不同数据意义.例如在财务报表里需要用特定的数字字符串格式来反映金额信息.货币币种.数据精确程度.增减趋势等等.下面分享如何通过C#编程来设置Excel表 ...

  2. 关于Vue.use()使用详解

    问题 相信很多人在用Vue使用别人的组件时,会用到 Vue.use() .例如:Vue.use(VueRouter).Vue.use(MintUI).但是用 axios时,就不需要用 Vue.use( ...

  3. asp.net core 将配置文件配置迁移到数据库(一)

    asp.net core 将配置文件配置迁移到数据库(一) Intro asp.net core 配置默认是项目根目录下的 appsettings.json 文件,还有环境变量以及 command l ...

  4. 使用PowerShell实时查看日志文件的变化

    开发过程中,会有好多的日志输出到日志文件中了,每次看日志都需要打开,log文件,觉得麻烦 找了个省事的方法 使用PowerShell 使用命令:Get-Content D:\www\webapp1\L ...

  5. .NET微服务调查结果

    .NET Core就是专门针对模块化的微服务架构而设计, 在2018年国庆时间展开.NET微服务的使用情况,本次调查我们总计收到了来自378个开发者的调查.从落地现状.架构体系.未来趋势等方面对微服务 ...

  6. ASP.NET的版本?

    问题源于这么一本书: <ASP.NET 4 解密(卷1)>,这本书大约是六七年前买的了,根据其名字,它讲述的是ASP.NET 4,那么ASP.NET现在究竟是什么版本?与.NET Fram ...

  7. 编译Xposed

    Xposed是Android平台上的有名的Hook工具,用它可以修改函数参数,函数返回值和类字段值等等,也可以用它来进行调试.Xposed有几个部分组成: 修改过的android_art,这个项目修改 ...

  8. 音频处理EQ的基本概念

     我们通常所说的人声,歌声以及乐声都是一个复合音,也就是由声音的基音和一系列的泛音所构成的.这些泛音都是基音频率的倍数,物理学中叫分音,电声学中叫谐波,音乐中则把它们称做泛音.可以说,泛音对音色的特性 ...

  9. property相关补充

    # Author : Kelvin # Date : 2019/1/25 15:20 class Foo: def __init__(self): self.original_price = 100 ...

  10. DSAPI.网络.网卡信息属性表

    DSAPI.网络.网卡信息属性表 其中,带有ReadOnly的属性只可读不可改,不带ReadOnly的属性即可读也可直接修改,如IP地址,Mac地址等 丢弃接收数据包数: 0 丢弃发送数据包数: 0 ...