数据库大作业——项目初始化及登录界面实现

Posted 2021-08-31 Fmm-PMO

对于一个框架学了很少一部分的菜鸡来说，做一个网页版的小项目demo可真是太难了，边参考边学边查（光跨域处理我就见过好多种，最后选了一个教程最详细，其实是因为有代码的做法，不过相比起来它也确实比其他从后端配置接口，又继承什么的要简单一些，它主要是在前端做的，采用的api），一个浏览器开着好几个页面，就这很多也只是学会了用法，至于原理更是懂得很少，底层的东西都太难了，能做到手撕源码的大佬，默默问一句“你们是人吗？”（狗头保命）。

一、项目初始化

关于这一部分，感慨颇深，由于之前踩过坑，本以为这次不会踩了，结果由于上次的学习间隔时间太久（好几个月了），忘了这个坑，就又踩了一遍。尽量不要使用idea创建vue项目，否则你会发现很多东西和网上的大多数教程是有区别的，少了router文件夹，多了public文件夹等等，而且，官方文档的讲解也主要是针对于vue2.0，所以强烈建议使用命令行创建，这种创建方式也更加能体现vue.cli（vue脚手架的特性）。前提已经有node环境，因为vue.cli用npm安装，而npm 是集成在 Node.js中的。
这里就只放一些相关的命令了。

vue init webpack database-vue项目初始化
后边基本上就是一路回车，但要注意
询问到是否安装 vue-router，选择是，因为是页面显示的关键。
还会问道是否使用 es-lint，强烈建议不使用，这玩意真的真的是太恶心了，虽然习惯了可以让你的代码更规范，但，我反正是受不了。
进入项目文件夹，执行npm install，会下载项目所需的依赖包等东西
执行npm run dev，访问http://localhost:8080，即可看到标志性的vue的logo


后边再用idea打开项目即可。

二、登录界面实现

细节不说了，说一下关于配置文件的内容，常见的是properties类型，不过现在大部分开始转向yml格式了，这里我对两种方法都进行了测试，都是可以达到效果的。yml格式一定要格外注意格式，他不管空格的多少，至少一个吧可以说，但只要是同一级，则一定要对齐。

关于url，其实有一个好玩的东西，因为我们大多测试都是在本机进行，即都是localhost或者127.0.0.1，那么在写的时候直接省略即可，即直接写jdbc:mysql:///book

application.properties

server.port=8181
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/book?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8
spring.datasource.username=改成你的用户名
spring.datasource.password=改成你的密码，休想看我的
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.hibernate.ddl-auto=none

application.yml

server:
  port: 8181
spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/book?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8
    username: 改成你的用户名
    password: 改成你的密码，休想看我的
    driver-class-name: com.mysql.jdbc.Driver
  jpa:
    hibernate:
      ddl-auto: none

真正的登录界面结合Element-UI更好看

这两个月还挺忙的，起早贪黑+提高效率应该可以吧。