前端基于vue,后台采用springboot+shiro的方式搭建的一个移动端商品展示平台

时间:2023-03-08 18:53:43

基于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,欢迎下载!