首先安装 nodemon ，如果是全局安装，那么所有的项目都可以使用mock服务 npm install nodemon 再安装express-mockjs npm i -D express-mockjs 接下来按照以下的步骤来 第一步 在项目根目录下建立api-interface文件，再建立一个文件夹叫mocks,这里面放json或者js都可以，然后再在mocks同级目录下建立app.js文件第二步编写app.js第三部 在mocks文件中编写一个叫test的json文件，文件中代码如下 然后写入 /*** 测试接口** @url ...
由于这里是在之前这篇文章的基础上进行稍加修改完成的，因而其绝大部分代码与上面的是一样的，而其不同之处在于，其请求数据的数据源不是来源于json文件，而是来自于后台的数据。此处的后台服务器中的数据由JSON Server所提供。 注意事项 json的数据结构 这是之前所请求的json数据： {"status":0 ,"message":[{"id":1,"name":"张三"} ,{"id":2,"name":"李四"} ] }如果我们直接使用之前所使用的json数据，其在JSON Server中执行下面...
解决 webpack-dev-serveri 启动后通过外部访问报错 invalid host header 修改 config/index.js 的 host 属性为 ‘0.0.0.0 { // ..., host: 0.0.0.0, port: 8080, // ... }修改 build/webpack.dev.conf.js 的 devServer 配置 增加 disableHostCheck = true devServer: {clientLogLevel: warning,historyApiFallback: true,hot: true,compress: true,host: HOST || config.dev.host,port: PORT || config.dev.port,open: config.dev....
Vue是一款比较流行的JS库，本文为大家介绍一些Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目 一、Vue常用UI组件 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2611 - 三端样式一致的响应式 UI...
最近好多伙伴说，我用vue做的项目本地是可以的，但部署到服务器遇到好多问题：资源找不到，直接访问index.html页面空白，刷新当前路由404。。。用react做的项目也同样遇到类似问题。现在我们一起讨论下单页面如何部署到服务器？ 由于前端路由缘故，单页面应用应该放到nginx或者apache、tomcat等web代理服务器中，千万不要直接访问index.html，同时要根据自己服务器的项目路径更改react或vue的路由地址。 如果说项目是直接跟在域名后...
一般在我们做项目时，我们都会通过POST请求拿到服务器给到的set-Cookies，保存在浏览器的Cookie里 这里需要明确一点。缓存有三类 cookie、 sessionStorage 、localStorage cookie: 存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。 另外两种是HTML5提供的： 不参与和服务器的通信； ...
上上一篇我写过一些关于vue项目部署到linux服务器的文章，但是那是以node作为开发环境 pm2 守护进程的方式，让他能正常运行，可是还是出现了问题，因为属于与APP交互的页面，在webView中打开过慢，APP的用户体验非常的差，所以我查找了资料，改变了部署方式，接下来我介绍一下 这一次，我想Tomcat为例 我们先看一下Linux中 Tomcat下面的目录结构：以vue-cli 搭建出来的手脚架 webpack的模板下的/config/index.js，这里可以看到asse...
最近刚重构完，我们的一个项目，由原来的jsp模式改为了前后端分离，前端选型为vue，开发完成之后第一件时间就是要部署测试，服务端选的是Apache。本来以为很简单的一件事情，几经坎坷部署了两天才算能够正常访问了。先记录如下， 过程搭建Apache环境，vue项目build之后把生成的dist文件放到，Apache下面，启动Apache之后本以为能够正常访问了， 前提说下：vue项目路由model:history ，默认不会出现下面的问题，因为个人感觉项目路径...
Nuxt 随着现在vue和react的流行，许多网站都做成了SPA，确实提升了用户体验，但SPA也有两个弱点，就是SEO和首屏渲染速度。为了解决单页应用的痛点，基于vue和react的服务端渲染应运而生。由于公司的框架采用的是vue，所以就简单的研究了一下基于vue的服务端渲染框架——NUXT。在vue的官网有关于服务端渲染的详细介绍，而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置，也集成了Vue2、vue-router、vuex、vux-meta（管理页...
当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。 如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线 先来描述一下期间遇到的问题有哪些： 1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。 2、打包好的静态资源均...
背景我们都知道浏览器有一个既核心也最基本的安全功能，即同源策略。同源分别是:协议，域名，端口。如果浏览器访问服务器不同源的话，就会访问不到数据。那开发中常常访问的服务器不同源，那么可以借助一个服务器当做中介来访问需要访问的服务器从而获得数据。因为同源策略是浏览器的安全机制，而服务器之间是不受此限制的。之前vue-cli模板build文件夹下有dev-serve.js文件，可以在此文件中配置本地node服务器实现跨域，现在的模板...
什么是腾讯验证码？它长这个样子……:point_down: 最近公司项目要求引入腾讯云验证，要求是这样的： 为了防止别人恶意刷短信验证码，当用户短时间内多次获取验证码的时候，需要调用腾讯验证码，验证成功后会继续自动发送验证码 ，刚开始的我听的一脸蒙蔽，网上搜索也没有多少相关的文章，然而现在我接通啦，发现是很简单点事（或许就是因为太简单了所以没有人写2333…） 不多BB，开始吧！ 先看文档的接口调用流程： （文档地址...
直接使用 Vue 构建前端单页面应用，页面源码时只有简单的几行 html，这并不利于网站的 SEO，这时候就需要服务端渲染 2016 年 10 月 25 日，zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后，一个基于 Vue.js 的服务端渲染应用框架应运而生，与 Next.js 异曲同工，这就是Nuxt.js 一、快速模板 在已经安装了 vue-cli 的前提下，可以快速创建一个 nuxt 的项目模板 vue init nuxt-community/starter-t...
预览链接点击预览 效果图如下所示，大家感觉不错，请参考实现代码。 需求 [x] 预览：根据选择图像大小自适应填充左侧裁剪区域[x] 裁剪：移动裁剪框#8;右侧预览区域可实时预览[x] 上传&清空：点击确认上传裁剪图片，点击取消按钮清空图像[ ] 裁剪框可调节大小实现步骤 methods:funName() - 对应源码中#8;methods中的funName方法 data:dataName - 对应源码中data中的dataName数据 1. 图片选择与读取 选择图片 ：(methods:selectPic)...
- 首先确定此项目在本地能够运行成功 在本地命令行中输入npm run start，无报错，且打开127.0.0.1:3000 有写的路由为/的页面，如图此为文件层级关系 front为前端文件 xk3为后台express与数据库mysql链接的文件 用命令行进入后台并且运行，启动成功这是路径为/的页面在浏览器中输入路径http://localhost:3000/ 浏览器中显示WelCome to express 至此此项目在本地运行成功，我们现在就要放到服务器上。 - 准备工作 此前服务器的基本设...