前端基于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项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实 ...
随机推荐
- Ubuntu14.04 静态编译安装Qt4.8.6
./configure -static -nomake demos -nomake examples -nomake tools -no-exceptions -prefix /usr/local/Q ...
- xmanager小技巧
使用manager时候,左键选中之后,直接右键粘贴,能带来效率的提升.虽然是小技巧,但有人还是不知道,这里简单写一下,供需要的同学参考. 简单二步设置: 1.工具-选项
- Linux基础(二)
网卡的启动与关闭 ipup ens33 启动网卡 ifdown 关闭网卡 普通用户没有该权限 root用户,管理员,普通用户的权限 root 至高无上的 root用户所在的组是root组 管理员 ...
- shell日期整理
date 当前日期+时间 # 日期格式化:date+"" - date +"%Y%m%d" 不带横杠分隔符的日期20160107 date +"%Y% ...
- 六种 主流ETL 工具的比较(DataPipeline,Kettle,Talend,Informatica,Datax ,Oracle Goldengate)
六种 主流ETL 工具的比较(DataPipeline,Kettle,Talend,Informatica,Datax ,Oracle Goldengate) 比较维度\产品 DataPipeline ...
- hdoj2036 改革春风吹满地——叉积
利用向量积(叉积)计算三角形的面积和多边形的面积 关于叉积计算三角形面积和多边形面积 Problem Description " 改革春风吹满地, 不会AC没关系; 实在不行回老家, 还有一 ...
- python argparse模块的使用
import argparse def get_parse(): # 初始化 parse = argparse.ArgumentParser() # 添加选项,类型为str,默认为空 parse.ad ...
- CentOS 网络互通情况下把一个Linux服务器的文件发送到另一个服务器
scp -r 文件名/目录名 root@192.168.2.144:/home/hsw -r 发送目录使用,表示把该目录下的所有子目录以及文件发送过去
- 源码阅读 - java.util.concurrent (一)
java.util.concurrent这个包大致可以分为五个部分: Aomic数据类型 这部分都被放在java.util.concurrent.atomic这个包里面,实现了原子化操作的数据类型,包 ...
- HDU 1074:Doing Homework(状压DP)
http://acm.hdu.edu.cn/showproblem.php?pid=1074 Doing Homework Problem Description Ignatius has just ...