前端基于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项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实 ...
随机推荐
- 使用VS2010开发Qt程序的4点经验(QT4到QT5的升级,更改sln文件,切换工程使用的Qt库,在VS的Solution Explorer视图中建立文件夹)
导读 相比于Qt Creator,我更喜欢用VS2010来进行开发.虽然启动时间相对较慢,但是VS下强大的快捷键和丰富的插件,以及使用多年的经验,都让我觉得在开发过程中得心应手.其中最重要的一点是,有 ...
- play框架之简介
Play Framework是一个开源的Web框架,背后商业公司是Typesafe.要介绍Play之前,首先理清Play的两个不同的分支. Play 1.x 使用Java开发,最新版本是1.3.1,只 ...
- 细谈unity资源加载和卸载
转载请标明出处:http://www.cnblogs.com/zblade/ 一.概要 在了解unity的资源管理方式之后,接下来细谈一下Unity的资源是如何从磁盘中加载到运行时的内存中,以及又是如 ...
- CodeSmith使用SQLite Provider找不到请求的 .Net Framework 数据提供程序
关于CodeSmith5使用SQLite Provider时的报错:System.BadImageFormatException: 未能加载文件或程序集“System.Data.SQLite,.... ...
- 【Aizu - ALDS1_1_C】Prime Numbers(素数筛法)
Prime Numbers Descriptions: A prime number is a natural number which has exactly two distinct natur ...
- node.js简单数据接口开发
随着网络时代的快速发展,前端开发不仅仅是做出漂亮的页面就可以了,还要会一点后端语言,那么后端语言有Java,php,node.js最常见,那我们应该学哪一种呢,为了让我们自己更好的学习,我推荐选择no ...
- 干货!Git 如何使用多个托管平台管理代码
考虑到github不能免费创建私有仓库原因,最近开始在使用码云托管项目,这样避免了连接数据库的用户密码等信息直接暴露在公共仓库中.今天突然想到一个点,就是能不能同时把代码推送到github和码云上呢? ...
- 【IDE】idea在debug模式启动非常慢,debug模式一直在启动中状态
现象:一直处于启动中状态,日志刷的很慢,非debug模式正常启动: 最终解决方式:下图按钮,取消所有打过的断点,问题解决
- 使用redis PSUBSCRIBE实现实时任务
PSUBSCRIBE可以监听键的过期事件 1.进行数据库的配置 notify-keyspace-events Ex 2.使用命令监听事件 psubscribe __keyevnet@0__:expi ...
- CentOS 7 时区设置 timedatectl
[root@testandy ~]# timedatectl --help timedatectl [OPTIONS...] COMMAND ... Query or change system ti ...