前端基于vue,后台采用springboot+shiro的方式搭建的一个移动端商品展示平台
基于vue实现的移动端商品展示页,可以web-view的方式嵌入到小程序中,布局简约、大气,减少初学者或开发者不必要的工作量。后台维护采用的springboot+shiro的方式,为广大爱好者提供展示模板,方便快速构建属于自己的商户展示平台。
采用的技术如下:
1、前端使用vue-cli脚手架创建前端项目,采用axios前后端请求,store存储登陆状态等信息
//vue-cli脚手架 运行流程
1、npm run dev
执行的是package.json 中scripts部分中key(上述命令是dev,即dev中对应的命令)对应的value
//"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
webpack-dev-server 一种node.js的服务器 --inline代表会将webpack-dev-server客户端加入到webpack入口文件的配置中。
--progress 代表是否显示滚动条 --config 指定一个新的配置文件
scripts部分除了上述的dev 还包括
start: 是命令yarn start的入口, npm与yarn殊途同归,区别不大 任选。
lint:值“eslint --ext .js,.vue src”,代表执行npm run lint命令时,直接该脚本,是为了检查代码是否符合ESlint的规范。
build:"node build/build.js",打包生产命令 当运行npm run build时执行。
package.json中其他部分
1、项目依赖:dependencies npm run build 时候构建项目的包。这些包的代码会被打包添加到实际的应用代码之中
依赖的几种写法:
(1)"vue": "2.5.2", 表示固定版本,只依赖2.5.2版,之后有新版也不会更新
(2)"vue": "~2.5.2", 表示只安装 2.5.X 系列版本的最新版,而 2.6.X 的或其他的不会更新
(3)"vue": "^2.5.2", 表示安装当前库的最新版
2、
开发依赖:devDependencies 与dependencies 区别是:开发依赖里面的东西不会添加到生产环境中,
只是在开发阶段辅助编译开发等功能。比如:autoprefixer,babel-core 等,他只是在编译的时候给CSS样式添加一些浏览器兼容的前缀,
和把ES6 转译成ES5。当打包结束时就会被抛弃,并不会添加到打包的结果中。
3、engines 主要是规定开发时候的环境的node.js 和 npm 的版本不能太低
4、browserslist
一个阈值。表示是否要去兼容某些浏览器,如果小于阈值的部分在ES6的转译时可能将会忽略。
5、main: 代表入口js
//webpack 模块化管理、打包工具
//vue学习心得
vue-cli脚手架创建项目
1、3.0的vue create project-name
2、2.9 vue init webpack project-name (出来的目录结构是有区别的)
二、后台搭建采用springboot框架,集成shiro控制权限。采用maven的方式打包发布
1、mvn clean
2、mvn install -Dmaven.test.skip=true
前端代码存在码云,访问地址:https://gitee.com/lxming/private_warehouse,欢迎下载!
前端基于vue,后台采用springboot+shiro的方式搭建的一个移动端商品展示平台的更多相关文章
- 基于Vue+Spring MVC+MyBatis+Shiro+Dubbo开发的分布式后台管理系统
本文项目代码: 服务端:https://github.com/lining90567/dubbo-demo-server 前端:https://github.com/lining90567/dubbo ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 前端基于VUE的v-charts的曲线显示
目录 前端基于VUE的v-charts的曲线显示 1. 应用背景 2. 分析数据生产者生成 3. 取出数据消费者 4. 前端显示 4.1 安装V-charts插件 4.2 引入veline曲线插件 4 ...
- 基于Vue、web3的以太坊项目开发及交易内幕初探 错误解决总结
基于Vue.web3的以太坊项目开发及交易内幕初探 本文通过宏观和微观两个层面窥探以太坊底层执行逻辑. 宏观层面描述创建并运行一个小型带钱包的发币APP的过程,微观层面是顺藤摸瓜从http api深入 ...
- 基于vue+leaflet+echart的足迹分享评论平台
(其实题目是随便取的,目的只是用来证明Vue+leaflet+springboot技术栈的可行性) 效果 小专栏不支持上传视频?想看的话可以去我的知乎看最新的文章,那个应该可以.在这里 主要功能描述 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
- 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之自定义组件(四)
基于Vue和Quasar的前端SPA项目实战之序列号(四) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实 ...
随机推荐
- Silverlight ItemsControl详细解析+解惑
Silverlight最强大的地方就在于定义控件了,Silverlight提供了非常灵活和高效的控件定义方式,几乎可以实现任何复杂的控件实现,对于快速开发应用程序有着重要的意义.在Silverligh ...
- vs2010添加TSTCON( ActiveX Control Test Container )工具
vs2010中的TSTCON( ActiveX Control Test Container )工具非自动安装,而是作为一个例程提供.所以应找到该例程,并编译: 如vs2010安装在默认路径则 1, ...
- devexpress 给GridView添加行号
先找到 此时间gridView1_CustomDrawRowIndicator private void gridView1_CustomDrawRowIndicator(object sender, ...
- npm设置淘宝代理
npm config set registry https://registry.npm.taobao.org npm info underscore
- 概念了解:CGI,FastCGI,PHP-CGI与PHP-FPM
CGI CGI全称是“公共网关接口”(Common Gateway Interface),HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具,其程序须运行在网络服务器上. CGI可以用任何一 ...
- 另一个ACM之路建议
ACM联系建议 一位高手对我的建议: 一般要做到50行以内的程序不用调试.100行以内的二分钟内调试成功.acm主要是考算法的 ,主要时间是花在思考算法上,不是花在写程序与debug上. 下面给个计划 ...
- HDU 3081:Marriage Match II(二分图匹配+并查集)
http://acm.hdu.edu.cn/showproblem.php?pid=3081 题意:有n个男生n个女生,他们只有没有争吵或者女生a与男生A没有争吵,且女生b与女生a是朋友,因此女生b也 ...
- Linux查看进程具体开启时间
ps -p 2417 -o lstart -- 2417为进程号
- C语言学习书籍推荐《C语言入门经典(第4版)》
霍顿 (Ivor Horton) (作者), 杨浩 (译者) <C语言入门经典(第4版)>的目标是使你在C语言程序设计方面由一位初学者成为一位称职的程序员.读者基本不需要具备任何编程知识, ...
- C# Socket 简单的控制台案例
一.服务器端 1. 实例化并设置socket实例对象 a.创建ip地址和端口 b.绑定监听地址 c.设置一下允许同时访问数 2. 监听连接 a.通过启动一个新的线程执行,这样主线程不会假死(启动线程, ...