不想当全栈的前端不是好设计

ST最近心血来潮想研究下后台增删改查
结果被后台开发新手村的小怪兽虐到死
记录一下学习过程恳请大腿们不要嘲笑
前方低能预警这真的不是一篇技术博客

Reference: 感动铁路热心好同事李阿明

在前端大陆,出了HTML新手村,被React小boss打的遍体鳞伤的日子也过去一阵了,这时就突然想去其他大陆看一看。毕竟随便拽个后台小哥都能写出一个很丑但能用的jsp,但作为一个优秀的设计师兼伪前端,ST电脑里……完全没有数据库和后台开发的种种工具( ¯•ω•¯ ),咦所以我们来补一补常识。

技术太多挑俩研究,Oracle + Springboot就它吧。

Step1:PL/SQL与Oracle客户端

在ST目前的理解中,一个程序应该是分为前台,后台,数据库三部分。首先把数据库装一下。本来以为需要装Oracle但是发现好像可以用PL/SQL链接现有远程的库。

需要的安装文件有两个如下,一个oracle客户端instantclient,一个PL/SQL:

不想当全栈的前端不是好设计_第1张图片
需要的安装文件.png

先看instantclient。解压oracle客户端instantclient到随便一个地方,然后手动建立NETWORK/ADMIN文件夹并建一个tnsnames.ora,这个ora文件里面写上连接Oracle数据库的配置。
不想当全栈的前端不是好设计_第2张图片
建立tnsnames.ora

tnsnames.ora的内容从其他开发小哥哪里拷贝一下即可。

JXGL =
  (DESCRIPTION =
    (ADDRESS_LIST =
      (ADDRESS = (PROTOCOL = TCP)(HOST = 目标IP)(PORT = 目标端口))
    )
    (CONNECT_DATA =
      (SERVICE_NAME = orcl)
    )
  )

然后添加几个系统变量:
ORACLE_HOME : D:\Database\instantclient_12_1
TNS_ADMIN%ORACLE_HOME%
NLS_LANGSIMPLIFIED CHINESE_CHINA.ZHS16GBK
修改Path,增加变量值:%ORACLE_HOME%\bin;

至此instantclient安装配置完毕。

装上PL/SQL,第一次打开时不输入用户密码先取消进入主界面。打开Tools->Perferences->Connection,配置Oracle Home和OCI,地址即之前装instantclient的地址。

不想当全栈的前端不是好设计_第3张图片
preferences设置.png

此时登陆PL/SQL,输入用户密码理论上可以链接到数据库啦。左侧Tables目录下能看到该数据库所有的表,趁经理不知道赶快公库私用建一个自己的表玩啊哈哈哈哈哈。


不想当全栈的前端不是好设计_第4张图片
链接数据库.png

Step2:搭建Springboot工程

虽然我,还没有搞懂Spring,SpringMVC,Springboot都有什么区别(´ー`),不过先不管三七二十一拿一个用再说。
开IDEA新建工程,选Spring Initializr。为什么不开Myeclipse,因为黑色显得高级→_→


不想当全栈的前端不是好设计_第5张图片

建立工程时有一步是选依赖,没接触过后台的小白这一步就开始崩溃,因为根本不知道选啥……不过反正后面也可以改先选个web好了……

不想当全栈的前端不是好设计_第6张图片

建立完项目理论上工程目录如下:

不想当全栈的前端不是好设计_第7张图片
工程结构.png

此时工程里的配置文件可能是application.properties文件,建议删掉改成yml文件因为看着格式比较好看,里面可以改改端口号啥的还可以把数据塞进去。

#application.properties
 
server.port=8080
#application.yml

server:
  port: 8080

此时运行DemoApplication应该是不会报错哒虽然什么也显示不出来。这就是我不喜欢后台的地方因为它们经常什么也显示不出来→_→

不想当全栈的前端不是好设计_第8张图片
运行.png

Step3:做一点小测试

虽然我,还没有搞懂Dao层、Entity层、Service层、Controller层都有什么区别(´ー`),大致知道Dao层跟数据库打交道,Controller跟View层打交道,Entity放数据库在项目中的类,Service是干嘛的……不过先不管三七二十一写一个再说。

测试一:读取yml中的值

不想当全栈的前端不是好设计_第9张图片
建立一个Controller.png

建立一个HelloController,并在yml里加一个值name:Saint。

#application.yml

server:
  port: 8080
  context-path: /crud
name:Saint
不想当全栈的前端不是好设计_第10张图片

@Value(${name})的方式可以取得配置文件中的值。照着教程写一个Controller ( •́ _ •̀)。

@RestController
public class HelloController {
    @Value("${name}")  
    private String name;  

    @RequestMapping(value = "/crud/hello",method = RequestMethod.GET)
    Public String say(){
        return "Hello " + name;
    }
}

缺少啥包就alt+enter自动导入进来,基本上都能解决( ´ω` )。

不想当全栈的前端不是好设计_第11张图片

运行。嘿哈!

运行结果.png

测试二:还是读取yml中的值

如果yml中一个属性有好几个值。

#application.yml

server:
  port: 8080
  context-path: /crud
person:
  name:Saint
  age:26
不想当全栈的前端不是好设计_第12张图片

建立一个接收application.yml中的person属性的类。

@ConfigurationProperties(prefix="person")
public class PersonProperties { 
    private String name; 
    private Integer age;
    
    public String getName() { 
        return name;    
    } 
    public String setName() { 
        this.name = name; 
    }     
    public Integer getAge() { 
        return age;    
    } 
    public Integer setAge() { 
        this.age = age; 
    }  
}
不想当全栈的前端不是好设计_第13张图片

这时会报异常,需要在pom.xml里面引入ConfigurationProperties的依赖。

 
  org.springframework.boot 
  spring-boot-configuration-processor 
  true 

不想当全栈的前端不是好设计_第14张图片
pom.xml引入依赖.png

然后修改HelloController,用我们刚刚写的类中的方法去读取数据。

@RestController
public class HelloController {
    @Autowired 
    private PersonProperties person;  

    @RequestMapping(value = "/crud/hello",method = RequestMethod.GET)
    Public String say(){
        return person.getName() + person.getAge();
    }
}
不想当全栈的前端不是好设计_第15张图片

运行,嘿嘿哈!后台怎么这么多逻辑一点也不有趣(´・ω・`)

运行结果.png

Step4:不过还是要连下数据库才行

虽然我,还没有搞懂jdbc、jpa,hibernate、mybatis都有什么区别(´ー`),不过先不管三七二十一……
啊就用jdbc好了听说它比较快。

pom.xml中增加jdbc的依赖。

 
  org.springframework.boot 
  spring-boot-starter-jdbc 

 
  com.oracle 
  ojdbc7 
  12.1.0.3 

不想当全栈的前端不是好设计_第16张图片
pom.xml

注意,这个时候,是会报错的,因为ojdbc这个包好像不能通过maven自动添加,得手动安装到本地仓库。
先去网上下载一个ojdbc的包,看好版本,然后cd到ojdbc.jar的存放目录下,运行命令:
mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc7 -Dversion=12.1.0.3 -Dpackaging=jar -Dfile=ojdbc7.jar

如果这时候项目还报错找不到包,请检查IDEA里maven的路径,确保用的是装了ojdbc.jar的那个maven,ST之前把maven的路径选错了所以一直找不到( º﹃º )

yml中配置数据源。跟之前PL/SQL登录用的信息一样即可。

#application.yml

server:
  port: 8081
  context-path: /crud

datasource:
      driver-class-name: oracle.jdbc.driver.OracleDriver
      url: jdbc:oracle:thin:@数据源地址
      username: 用户
      password: 密码
不想当全栈的前端不是好设计_第17张图片
application.yml

接下来读取数据库。
新建一个PersonController,用jdbcTemplate获取数据库数据试一下。表就用我们之前偷偷建的那张表。

@RestController
@RequestMapping("/crud")
public class PersonController {
    @Autowired 
    private JdbcTemplate jdbcTemplate;  

    @RequestMapping(value = "/person",method = RequestMethod.GET)
    Public List show(){
        list l = jdbcTemplate.queryForList("select * from 表名")
        return l;
    }
}
不想当全栈的前端不是好设计_第18张图片

浏览器看一下接口,哇还记得我们之前添加的三条数据,成功读取d(`・∀・)b

list数据.png

到这里终于看着很熟悉了,前端开发的时候后台给的都是这种东西。

下面搞个View层。就大功告成了。
阿勒什么开发到这了你告诉我Springboot没有View层(((゚Д゚;)))?
没关系,咱什么也不会只会view层!
下面演示5分钟用vue搭建单页应用。搭建过程略。

不想当全栈的前端不是好设计_第19张图片

接口写好,点击读取。

不想当全栈的前端不是好设计_第20张图片

开心~ヽ(✿゚▽゚)ノ

啊写完才发现springboot推荐用thymeleaf做引擎写页面还是很方便的。
不过改日再研究thymeleaf吧。
至于增删改查的后台代码怎么写,先缓缓→_→
能读个数已经死了无数脑细胞了……
我要先回前端大陆。

总结:

全栈是不可能全栈的,这辈子都不可能全栈(ㆆᴗㆆ)。

你可能感兴趣的:(不想当全栈的前端不是好设计)