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

对于一个框架学了很少一部分的菜鸡来说,做一个网页版的小项目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更好看

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

猜你喜欢

转载自blog.csdn.net/weixin_45845039/article/details/116560536