springboot实战小项目-简要介绍、vue项目创建

因为菜,所以要好好学习!

一.项目介绍:这是一个后台管理系统,准备实现的功能:

  1.登录、注册、个人信息查看、退出登录

  2.根据关键字查询用户、新增用户、根据id或者其他字段排序、编辑用户信息、删除用户

  3.分页功能

  4.用户的导入与导出

  5.文件上传

  6.使用云服务器部署项目

  7.验证码

  8.整合支付宝沙箱支付

二.技术栈:前后端分离

  1.前端框架:vue+ElementPlus

  2.后端框架:SpringBoot+MybatisPlus

  3.数据库:Mysql

  4.用到的插件/工具类:Hutool、分页插件、跨域、请求返回结果、封装axios的js。

    链接:https://pan.baidu.com/s/1k6fOBTm8JoAGJnlVWprA3Q
    提取码:5678

三.项目从这里开始:

  1.环境搭建(jdk8+nodejs14.18.3+npm6.14.15+idea+sqlyog)

    (1)下载地址:直接去各个软件的官网去下载就好

    (2)安装步骤:去搜吧小伙子

    (3)注意细节:安装完各个软件工具后,运行cmd命令,输入java和javac查看jdk是否安装成功,如果出现xxx不是内部命令的字样就说明安装失败,输入node -v、npm -v查看相应版本,确保都安装成功了后,输入npm install -g @vue/cli这个命令,安装一个vue的脚手架,用来创建vue项目,环境就到这里。

  2.创建vue项目

    (1)新建一个文件夹,命名为“springboot-vue”。

    (2)运行cmd命令,cd到刚刚新建的文件夹目录下,输入vue create springboot-vue-demo(语法:vue create 项目名),然后点击“回车”。

springboot实战小项目-简要介绍、vue项目创建_第1张图片

    (3)这一步是选择相关配置,按上下键选择“Manually select features”这个选项,点击“回车”。

springboot实战小项目-简要介绍、vue项目创建_第2张图片

    (4)点击“空格”进行选择相关选项,用上下键控制移动,这里选择这四项,然后点击“回车”。

springboot实战小项目-简要介绍、vue项目创建_第3张图片

    (5)选择3.x,点击“回车”。

springboot实战小项目-简要介绍、vue项目创建_第4张图片

    (6)这里是问你是否用以前的路由方式,输入y,点击“回车”。

springboot实战小项目-简要介绍、vue项目创建_第5张图片

    (7)这里选择In package.json选项,点击“回车”。

springboot实战小项目-简要介绍、vue项目创建_第6张图片

    (8)输入y,点击“回车”。保存这个项目的配置。

springboot实战小项目-简要介绍、vue项目创建_第7张图片

    (9)这里是要你输入一个自定义的名字即可,我这里输入的123,输入完点击“回车”。

springboot实战小项目-简要介绍、vue项目创建_第8张图片

    (10)出现如下的窗口,说明项目正在创建,等待创建完毕即可。

springboot实战小项目-简要介绍、vue项目创建_第9张图片

    (11)项目创建完毕后,在我们新建的文件夹下就多出来一个名为springboot-vue-demo的文件夹,这就是我们创建的vue项目

springboot实战小项目-简要介绍、vue项目创建_第10张图片

    (11)用idea开发工具打开这个文件夹,在idea中配置运行环境,打开后的样子如下所示。

springboot实战小项目-简要介绍、vue项目创建_第11张图片

    (12)在idea中配置运行vue项目的环境,点击idea上面的Add Configuration...按钮,打开下面的窗口。

springboot实战小项目-简要介绍、vue项目创建_第12张图片

    (13)点击左上角的加号按钮,往下滑找到npm选项,点击后出现如下的窗口。

springboot实战小项目-简要介绍、vue项目创建_第13张图片

    (14)配置并核对如下的几个选项。核对完毕后点击“apply”,然后点击“ok”,然后点击Add Configuration...旁边的绿色小三角按钮运行项目

springboot实战小项目-简要介绍、vue项目创建_第14张图片

    (15)项目运行完毕后打开浏览器输入http://localhost:8080/,如果打开了以下页面,说明项目启动成功,下一步就是做前端页面。

springboot实战小项目-简要介绍、vue项目创建_第15张图片

 

你可能感兴趣的:(springboot实战小项目-简要介绍、vue项目创建)