生产实习-小米后台管理系统

#找工作

  • 一份简历 通过
  • 面试、笔试 通过
  • 入职

#面试过程

一、大厂

  1. 算法
  2. 技术(项目经理)
  3. 技术(CTO,首席技术官 chief technology officer)
  4. 人力(待遇、薪资等)

不确定因素:大厂要求 985、211;但也有不要求的

二、中小厂

  • 初级程序员(技术面试):一轮面试,北京就业 薪资<=14k
  • 中级程序员(技术面试):二轮面试,北京就业 薪资 14-18
  • 高级程序员(技术面试):北京就业 薪资>=18

工资+项目

技术面试:一个自我介绍,项目介绍,底层算法(中级以上)

#2 周实训

资料结构:

  • 静态页面:HTML CSS JS
  • JS 框架:Vue
  • 数据库:MySQL
  • 框架模板

#软件安装及配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
$ mysql --version
mysql  Ver 8.0.24 for Linux on x86_64 (Source distribution)
$ java -version
openjdk version "1.8.0_292"
OpenJDK Runtime Environment (build 1.8.0_292-b10)
OpenJDK 64-Bit Server VM (build 25.292-b10, mixed mode)
$ mvn -version
Apache Maven 3.8.1 (NON-CANONICAL_2021-04-26T21:52:54Z_root)
Maven home: /opt/maven
Java version: 1.8.0_292, vendor: Oracle Corporation, runtime: /usr/lib/jvm/java-8-openjdk/jre
Default locale: en_US, platform encoding: UTF-8
OS name: "linux", version: "5.13.12-arch1-1", arch: "amd64", family: "unix"

一、 MySQL

自 2013 年起,MariaDB 就被 Arch Linux 当作官方默认的 MySQL 实现(https://wiki.archlinux.org/title/MariaDB)。因此,在 Arch Linux 上配置 MySQL 对于我这个新手来说很是吃力。

  1. MySQL
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$ sudo pacman -S mysql

# 此前操作:1. 安装 mysql 后卸载 2. 安装 percona-server 后卸载
$ systemctl status mysqld
○ mysqld.service - MySQL Server
     Loaded: loaded (/usr/lib/systemd/system/mysqld.service; disabled; vendor preset: disabled)
     Active: inactive (dead)
       Docs: man:mysqld(8)
             http://dev.mysql.com/doc/refman/en/using-systemd.html

$ mysqld --initialize --user=mysql --basedir=/usr --datadir=/var/lib/mysql
$ systemctl start mysqld
Aug 25 16:28:07 arch mysqld[38917]: 2021-08-25T08:28:07.060404Z 1 [System] [MY-013576] [InnoDB] InnoDB initialization has started.
Aug 25 16:28:07 arch mysqld[38917]: 2021-08-25T08:28:07.224649Z 1 [ERROR] [MY-013171] [InnoDB] Cannot boot server version 80024 on data directory built by version 80025. Downgrade is not supported
Aug 25 16:28:07 arch mysqld[38917]: mysqld: Can't open file: 'mysql.ibd' (errno: 0 - )
Aug 25 16:28:12 arch mysqld[38917]: 2021-08-25T08:28:12.229533Z 1 [ERROR] [MY-010334] [Server] Failed to initialize DD Storage Engine
Aug 25 16:28:12 arch mysqld[38917]: 2021-08-25T08:28:12.229758Z 0 [ERROR] [MY-010020] [Server] Data Dictionary initialization failed.
Aug 25 16:28:12 arch mysqld[38917]: 2021-08-25T08:28:12.229966Z 0 [ERROR] [MY-010119] [Server] Aborting
Aug 25 16:28:12 arch mysqld[38917]: 2021-08-25T08:28:12.230383Z 0 [System] [MY-010910] [Server] /usr/bin/mysqld: Shutdown complete (mysqld 8.0.24)  Source distribution.
Aug 25 16:28:12 arch systemd[1]: mysqld.service: Main process exited, code=exited, status=1/FAILURE
Aug 25 16:28:12 arch systemd[1]: mysqld.service: Failed with result 'exit-code'.
Aug 25 16:28:12 arch systemd[1]: Failed to start MySQL Server.

$ mysql
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/run/mysqld/mysqld.sock' (2)
# 错误原因:mysql 没有运行

sudo chmod 700 /var/lib/mysql # d——— to drwx—— ref: https://bowerstudios.com/node/211

参考资料:

  1. https://www.dailyrazor.com/blog/cant-connect-to-local-mysql-server-through-socket/

  2. Percona Server

本想直接使用 MySQL 但暂时无法解决这一问题,而且卸载 mysql 安装 percona-server 间接解决了无法启动 mysqld 服务的问题。于是,使用 percona-server。由它提供 MySQL 相关功能。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
$ systemctl status mysqld
○ mysqld.service - MySQL Server
     Loaded: loaded (/usr/lib/systemd/system/mysqld.service; enabled; vendor preset: disabled)
     Active: inactive (dead) since Wed 2021-08-25 17:21:15 CST; 1s ago
       Docs: man:mysqld(8)
             http://dev.mysql.com/doc/refman/en/using-systemd.html
    Process: 42794 ExecStart=/usr/bin/mysqld $MYSQLD_OPTS (code=exited, status=0/SUCCESS)
   Main PID: 42794 (code=exited, status=0/SUCCESS)
     Status: "Server shutdown complete"
        CPU: 7.961s

Aug 25 16:55:41 arch systemd[1]: Starting MySQL Server...
Aug 25 16:55:42 arch systemd[1]: Started MySQL Server.
Aug 25 17:21:14 arch systemd[1]: Stopping MySQL Server...
Aug 25 17:21:15 arch systemd[1]: mysqld.service: Deactivated successfully.
Aug 25 17:21:15 arch systemd[1]: Stopped MySQL Server.
Aug 25 17:21:15 arch systemd[1]: mysqld.service: Consumed 7.961s CPU time.
$ systemctl start mysqld        
$ systemctl status mysqld
● mysqld.service - MySQL Server
     Loaded: loaded (/usr/lib/systemd/system/mysqld.service; enabled; vendor preset: disabled)
     Active: active (running) since Wed 2021-08-25 17:21:31 CST; 2s ago
       Docs: man:mysqld(8)
             http://dev.mysql.com/doc/refman/en/using-systemd.html
    Process: 46299 ExecStartPre=/usr/bin/mysqld_pre_systemd (code=exited, status=0/SUCCESS)
   Main PID: 46326 (mysqld)
     Status: "Server is operational"
      Tasks: 39 (limit: 28689)
     Memory: 339.3M
        CPU: 630ms
     CGroup: /system.slice/mysqld.service
             └─46326 /usr/bin/mysqld

Aug 25 17:21:31 arch systemd[1]: Starting MySQL Server...
Aug 25 17:21:31 arch systemd[1]: Started MySQL Server.

$ mysqld

2021-08-25T09:01:53.781252Z 0 [Warning] [MY-010091] [Server] Can't create test file /var/lib/mysql/mysqld_tmp_file_case_insensitive_test.lower-test
2021-08-25T09:01:53.781270Z 0 [Warning] [MY-010101] [Server] Insecure configuration for --secure-file-priv: Location is accessible to all OS users. Consider choosing a different directory.
2021-08-25T09:01:53.781312Z 0 [System] [MY-010116] [Server] /usr/bin/mysqld (mysqld 8.0.25-15) starting as process 44074
2021-08-25T09:01:53.783495Z 0 [Warning] [MY-010091] [Server] Can't create test file /var/lib/mysql/mysqld_tmp_file_case_insensitive_test.lower-test
2021-08-25T09:01:53.783918Z 0 [ERROR] [MY-010187] [Server] Could not open file '/var/log/mysqld.log' for error logging: Permission denied
2021-08-25T09:01:53.783958Z 0 [ERROR] [MY-010119] [Server] Aborting
2021-08-25T09:01:53.784040Z 0 [System] [MY-010910] [Server] /usr/bin/mysqld: Shutdown complete (mysqld 8.0.25-15)  Source distribution.

$ sudo mysqld                      
2021-08-25T09:02:45.203060Z 0 [Warning] [MY-010101] [Server] Insecure configuration for --secure-file-priv: Location is accessible to all OS users. Consider choosing a different directory.
2021-08-25T09:02:45.203109Z 0 [System] [MY-010116] [Server] /usr/bin/mysqld (mysqld 8.0.25-15) starting as process 44207
2021-08-25T09:02:45.204419Z 0 [ERROR] [MY-010123] [Server] Fatal error: Please read "Security" section of the manual to find out how to run mysqld as root!
2021-08-25T09:02:45.204459Z 0 [ERROR] [MY-010119] [Server] Aborting
2021-08-25T09:02:45.204549Z 0 [System] [MY-010910] [Server] /usr/bin/mysqld: Shutdown complete (mysqld 8.0.25-15)  Source distribution.

$ sudo vim /etc/mysql/my.cnf
# 在 [mysqld] 后添加 secure-file-priv = "/home/user/"

$ sudo mysqld               
2021-08-25T09:09:10.979800Z 0 [System] [MY-010116] [Server] /usr/bin/mysqld (mysqld 8.0.25-15) starting as process 44615
2021-08-25T09:09:10.981277Z 0 [ERROR] [MY-010123] [Server] Fatal error: Please read "Security" section of the manual to find out how to run mysqld as root!
2021-08-25T09:09:10.981314Z 0 [ERROR] [MY-010119] [Server] Aborting
2021-08-25T09:09:10.981438Z 0 [System] [MY-010910] [Server] /usr/bin/mysqld: Shutdown complete (mysqld 8.0.25-15)  Source distribution.

$ mysql_secure_installation

Securing the MySQL server deployment.

Enter password for user root: 
Error: Access denied for user 'root'@'localhost' (using password: YES)

$ sudo  mysql_secure_installation

Securing the MySQL server deployment.

Enter password for user root: 
Error: Access denied for user 'root'@'localhost' (using password: YES)

$ mysqld -u root -p
Enter password: 
mysqld: Can not perform keyring migration : Invalid --keyring-migration-source option.
2021-08-25T09:18:53.864275Z 0 [Warning] [MY-010091] [Server] Can't create test file /var/lib/mysql/mysqld_tmp_file_case_insensitive_test.lower-test
2021-08-25T09:18:53.864327Z 0 [System] [MY-010116] [Server] /usr/bin/mysqld (mysqld 8.0.25-15) starting as process 45953
2021-08-25T09:18:53.866541Z 0 [Warning] [MY-010091] [Server] Can't create test file /var/lib/mysql/mysqld_tmp_file_case_insensitive_test.lower-test
2021-08-25T09:18:53.866721Z 0 [Warning] [MY-010122] [Server] One can only use the --user switch if running as root
2021-08-25T09:18:53.866739Z 0 [ERROR] [MY-011084] [Server] Keyring migration failed.
2021-08-25T09:18:53.866769Z 0 [ERROR] [MY-010119] [Server] Aborting
2021-08-25T09:18:53.866865Z 0 [System] [MY-010910] [Server] /usr/bin/mysqld: Shutdown complete (mysqld 8.0.25-15)  Source distribution.

$ sudo mysqld -u root -p
Enter password: 
mysqld: Can not perform keyring migration : Invalid --keyring-migration-source option.
2021-08-25T09:19:08.313633Z 0 [System] [MY-010116] [Server] /usr/bin/mysqld (mysqld 8.0.25-15) starting as process 45967
2021-08-25T09:19:08.315061Z 0 [ERROR] [MY-011084] [Server] Keyring migration failed.
2021-08-25T09:19:08.315084Z 0 [ERROR] [MY-010119] [Server] Aborting
2021-08-25T09:19:08.315172Z 0 [System] [MY-010910] [Server] /usr/bin/mysqld: Shutdown complete (mysqld 8.0.25-15)  Source distribution.

$ sudo mysqld -u root -p
Enter password: 
mysqld: Can not perform keyring migration : Invalid --keyring-migration-source option.
2021-08-25T09:19:19.885753Z 0 [System] [MY-010116] [Server] /usr/bin/mysqld (mysqld 8.0.25-15) starting as process 45974
2021-08-25T09:19:19.887205Z 0 [ERROR] [MY-011084] [Server] Keyring migration failed.
2021-08-25T09:19:19.887226Z 0 [ERROR] [MY-010119] [Server] Aborting
2021-08-25T09:19:19.887317Z 0 [System] [MY-010910] [Server] /usr/bin/mysqld: Shutdown complete (mysqld 8.0.25-15)  Source distribution.

$ sudo pacman -S percona-server-clients

参考资料:

  1. https://www.percona.com/software/mysql-database/percona-server
  2. https://stackoverflow.com/a/40419548
  3. https://www.percona.com/doc/percona-server/8.0/installation/apt_repo.html
  4. https://www.linode.com/docs/guides/using-mysql-relational-databases-on-arch-linux/

二、IDEA(Intellij Idea Ultimate Edition)

获取 LICENSE 方式: GitHub Student Pack(thanks @GitHub)

#作业

txt 文本:姓名(第一天).txt

  • day1 课程感受;对 Java 方向的看法
  • day2 重新创建 maven 项目 1_高天贺home,定义一个包 HelloMaven,写一个主方法,输出 hello maven
  • day3 在 day2 的项目中,重新操作当天的任务;记学习笔记
  • day4 完成「数组绑定 HTML」,在 day2 项目中操作一遍;笔记
  • day5 完成「今日操作」,在 day2 项目中操作一遍;笔记

#第一天

课程感受:

讲课的峰哥还是比较幽默的,他的课我听起来不算枯燥。相信在接下来的时间里会相处得愉快。

对 Java 方向的看法:

  1. 没有系统学习过 Java 相关技术,听别人说,Java 是企业级开发语言,适合大型应用。招聘时也以 Java 居多;
  2. 我目前的精力在前端,对于 Java 没有更多的兴趣,不过能够通过这次实训了解 Java 开发,我觉得很有意义;
  3. Java 语言是一种工具,它能帮助公司开发更大型的项目、更易维护,虽然有 Go 语言这样的后起之秀,但是,Java 目前还占据主导地位。
  4. 编程语言是工具,能够通过它们做到一些从未做到的事,是令人感到喜悦的。

#第二天

  • 软件配置 Maven,IDEA

#第三天

系统架构:

  • 前端 Axios Ajax
  • 后端 Java Spring SpringMVC MyBatis SpringBoot
  • 数据库 MySQL

三方交互:用户(浏览器)访问前端「没有秘密」、前端访问后端「有秘密,用户不可见」、后端访问数据库。

步骤:

  1. 引入已有的 Maven 本地库,下载相关设置
  2. 搭建 SpringBoot 项目
  3. 访问动态资源
  4. 导入静态资源并访问

要点:

  1. 主类处于资源的最上层
  2. 类名和源文件名保持一致

问题:

一、com.alibaba:druid:jar:1.1.21 is invalid

1
[WARNING] The POM for com.alibaba:druid:jar:1.1.21 is invalid, transitive dependencies (if any) will not be available, enable debug logging for more details

将该依赖的版本由 1.2.6 改为 1.2.5,可以去除该警告。ref: https://github.com/alibaba/druid/issues/4305#issuecomment-899408386

二、无法运行 Spring Boot

当运行 RunBoot.java 主方法时,出现错误:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/usr/lib/jvm/default/bin/java...

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.3.5.RELEASE)

2021-08-25 10:35:42.397  INFO 8023 --- [           main] yidajiabei.xyz.RunBoot                   : Starting RunBoot on arch with PID 8023 (/home/archie/IdeaProjects/01_project/target/classes started by archie in /home/archie/IdeaProjects/01_project)
2021-08-25 10:35:42.401  INFO 8023 --- [           main] yidajiabei.xyz.RunBoot                   : No active profile set, falling back to default profiles: default
2021-08-25 10:35:43.002  WARN 8023 --- [           main] o.m.s.mapper.ClassPathMapperScanner      : No MyBatis mapper was found in '[yidajiabei.xyz]' package. Please check your configuration.
2021-08-25 10:35:43.329  INFO 8023 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8000 (http)
2021-08-25 10:35:43.336  INFO 8023 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2021-08-25 10:35:43.336  INFO 8023 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.39]
2021-08-25 10:35:43.394  INFO 8023 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2021-08-25 10:35:43.394  INFO 8023 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 915 ms
2021-08-25 10:35:43.519  INFO 8023 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Initializing ExecutorService 'applicationTaskExecutor'
2021-08-25 10:35:43.636  INFO 8023 --- [           main] c.a.d.s.b.a.DruidDataSourceAutoConfigure : Init DruidDataSource
2021-08-25 10:35:43.680  WARN 8023 --- [           main] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'dataSource' defined in class path resource [com/alibaba/druid/spring/boot/autoconfigure/DruidDataSourceAutoConfigure.class]: Invocation of init method failed; nested exception is org.springframework.boot.autoconfigure.jdbc.DataSourceProperties$DataSourceBeanCreationException: Failed to determine a suitable driver class
2021-08-25 10:35:43.681  INFO 8023 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Shutting down ExecutorService 'applicationTaskExecutor'
2021-08-25 10:35:43.683  INFO 8023 --- [           main] o.apache.catalina.core.StandardService   : Stopping service [Tomcat]
2021-08-25 10:35:43.700  INFO 8023 --- [           main] ConditionEvaluationReportLoggingListener : 

Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.
2021-08-25 10:35:43.710 ERROR 8023 --- [           main] o.s.b.d.LoggingFailureAnalysisReporter   : 

***************************
APPLICATION FAILED TO START
***************************

Description:

Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.

Reason: Failed to determine a suitable driver class


Action:

Consider the following:
 If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.
 If you have database settings to be loaded from a particular profile you may need to activate it (no profiles are currently active).

Disconnected from the target VM, address: '127.0.0.1:47459', transport: 'socket'

Process finished with exit code 1

1)WARN 50475 --- [main] o.m.s.mapper.ClassPathMapperScanner : No MyBatis mapper was found in '[yidajiabei.xyz]' package

这一警告的细节可以阅读 https://www.cnblogs.com/yangshaoxiang/p/12974555.html

2)Exception encountered during context initialization Failed to determine a suitable driver class

3)APPLICATION FAILED TO START

Description:

Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.

Reason: Failed to determine a suitable driver class


Action:

Consider the following:
  If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.
  If you have database settings to be loaded from a particular profile you may need to activate it (no profiles are currently active).

在为 ~/ 添加以下内容后,可以运行:

1
2
3
4
spring:
    datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/Cibus?useSSL=true

对于 driver-class-name 曾经的内容是 com.mysql.jdbc.Driver(已弃用),新的名称是 com.mysql.cj.jdbc.Driver

项目可以正常运行。

参考资料:

  1. https://stackoverflow.com/a/52387470

4)'artifactId' with value '1_中文home' does not match a valid id pattern.

POM 文件为 gav 格式,不允许中文字符或空格。仅使用下划线、数字、字母,将 artifactId 属性值改为符合要求的形式即可。

#第四天

  1. 静态资源访问动态资源 HTML 如何访问:Controller
  2. 交互数据的处理 HTML 传递数据给 Controller(动态资源) Controller 把数据返回给 HTML
  3. 交互的数据类型

一、静态访问动态

AJAX(Asynchronous JavaScript And XML) 的作用:

AJAX 使用的是一种结合。

  • 网页加载完成后,可以从 Web 服务器读取数据
  • 不刷新页面更新 Web 网页
  • 后台传递给 Web 服务器

参考资料:

  1. https://www.w3schools.com/whatis/whatis_ajax.asp

1)引入 AJAX:Vue,axios

Vue: MVVM 框架,数据直接绑定,数据驱动视图。

Vue 模型:

Vue MVVM

1
2
3
4
5
<div id="app">
  <li v-for="type in mi_type">
    <a v-bind:href="type.url">{{type.name}}</a><span>|</span>
  </li>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
let app = new Vue({
    el: '#app',
    data: {
        // mi_index: '京东商城',
        // mi_url: 'https://www.jd.com',
        mi_type: []
    },
    created:function() { // auto exec after Vue object load successfully
        // data initialization
        this.mi_type = [
            {name: `小米`, url:`https://www.mi.com/`},
            {name: `淘宝`, url:`https://www.taobao.com/`},
            {name: `京东`, url:`https://www.jd.com/`},
            {name: `拼多多`, url:`https://youhui.pinduoduo.com/`},
        ]
    }
})

#第五天

后端写入数据 // 前端从后端提取数据

  1. 使用 axios 的 get/then 方法,访问 Controller
  2. axios 代码中针对 this(外部与内部) 的处理
  3. Java 数据类型、Bean 书写

今天学习的主要内容:通过了 axios 获取后端写好的数组。

Project 结构:

1
2
3
4
5
6
7
8
~ root
-->src/main/java/yidajiabei.xyz/RunBoot.java
-->src/main/java/yidajiabei.xyz/controller/MiIndexPageController.java
-->src/main/java/yidajiabei.xyz/util/ResultBean.java
-->src/main/java/yidajiabei.xyz/domain/UrlBean.java

-->src/main/resources/static/js/system/index.js
-->src/main/resources/static/index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// src/main/java/yidajiabei.xyz/RunBoot.java
package yidajiabei.xyz;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class RunBoot {
    public static void main(String[] args) {
        SpringApplication.run(RunBoot.class, args);
    }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// src/main/java/yidajiabei.xyz/controller/MiIndexPageController.java
package yidajiabei.xyz.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import yidajiabei.xyz.domain.UrlBean;
import yidajiabei.xyz.util.ResultBean;

import java.util.ArrayList;
import java.util.List;

@RestController
public class MiIndexPageController {
    @RequestMapping("/typeList")
    public ResultBean typeList() {
        ResultBean<List<UrlBean>> result = new ResultBean<List<UrlBean>>();

        // Data assembly
        result.setSign(true);
        result.setMsg("Data Query succeeded!");
        // []
        List<UrlBean> list = new ArrayList<UrlBean>();
        // list begin
        UrlBean bean1 = new UrlBean();
        bean1.setId(1);
        bean1.setName("小米");
        bean1.setUrl("https://www.mi.com/");
        list.add(bean1);

        UrlBean bean2 = new UrlBean();
        bean2.setId(2);
        bean2.setName("淘宝");
        bean2.setUrl("https://www.taobao.com/");
        list.add(bean2);

        UrlBean bean3 = new UrlBean();
        bean3.setId(3);
        bean3.setName("京东");
        bean3.setUrl("https://www.jd.com/");
        list.add(bean3);
        // list end

        result.setData(list);
        return result;
    }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// src/main/java/yidajiabei.xyz/util/ResultBean.java
package yidajiabei.xyz.util;

// { sign: boolean, msg: "", data: null }
public class ResultBean<T> {
    private boolean sign; // result
    private String msg;   // message
    private T data;       // return json data

    public boolean isSign() {
        return sign;
    }

    public void setSign(boolean sign) {
        this.sign = sign;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }
}

src/main/java/yidajiabei.xyz/util/ResultBean.java 的图形示意:

ResultBean.java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// src/main/java/yidajiabei.xyz/domain/UrlBean.java
package yidajiabei.xyz.domain;

// { id: null, name: "", url: "" }
public class UrlBean {
    private Integer id; // Unique identifier
    private String name;
    private String url;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// src/main/resources/static/js/system/index.js
let app = new Vue({
    el: '#app',
    data: {
        // mi_index: '京东商城',
        // mi_url: 'https://www.jd.com/',
        mi_type: []
    },
    created:function () {
        // send ajax request
        let _this = this;
        axios.get("http://localhost:8000/typeList", {params: {}})
            .then(function (ret) {
                console.log(ret.data);
                let dataType = ret.data;
                dataType.msg = undefined;
                if(dataType.sign===true) {
                    _this.mi_type = dataType.data;
                } else {
                    alert(dataType.msg);
                }
        })
    }
})

axios 的图形示意:

ResultBean.java

1
2
3
4
<!-- src/main/resources/static/index.html -->
<li v-for="type in mi_type">
  <a v-bind:href="type.url">{{ type.name }}</a><span>|</span>
</li>

#第六天

今天的主要工作:

  1. 在数据库中建立包含 idnameurl 字段的表,并向其填充数据
  2. 在 IDEA 中配置 mybatis.generator,运行生成 urlPageBean,urlPageBeanMapper。

一、MySQL

数据库中的表有两个属性:字段和值。由此,字段和值形成一种映射关系。id 作为表的主键。

sql 语句练习:

1
2
3
SELECT id,name,url FROM urlbean;
-- this is comment
-- 从 urlbean 中选择 id,name,url 字段

二、MyBatis

使用它的逆向工程能力,由数据库端生成后端需要的 urlPageBean,urlPageBeanMapper 文件,之后前端从后端调用数据。

三、解决问题

1)mysql -u root -p

输出:

1
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

解决办法(来源):

1
2
3
4
5
6
7
# add `skip-grant-tables` under `[mysqld]` in `/etc/my.cnf` or `/etc/mysql/my.cnf`
systemctl restart mysqld
mysql -u root -p
mysql> flush privileges;
mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY 'NewPassword';
# remove/comment `skip-grant-tables` under `[mysqld]` in `/etc/my.cnf` or `/etc/mysql/my.cnf`
systemctl restart mysqld

2)Can't connect to local MySQL server through socket

解决办法:

修改 my.cnf 文件,我的文件配置:

# For advice on how to change settings please see
# http://dev.mysql.com/doc/refman/8.0/en/server-configuration-defaults.html

[client]
port=3306
socket=/var/lib/mysql/mysql.sock

[mysqld]
port=3306
socket=/var/lib/mysql/mysql.sock

#
# Remove leading # and set to the amount of RAM for the most important data
# cache in MySQL. Start at 70% of total RAM for dedicated server, else 10%.
# innodb_buffer_pool_size = 128M
#
# Remove the leading "# " to disable binary logging
# Binary logging captures changes between backups and is enabled by
# default. It's default setting is log_bin=binlog
# disable_log_bin
#
# Remove leading # to set options mainly useful for reporting servers.
# The server defaults are faster for transactions and fast SELECTs.
# Adjust sizes as needed, experiment to find the optimal values.
# join_buffer_size = 128M
# sort_buffer_size = 2M
# read_rnd_buffer_size = 2M
#
# Remove leading # to revert to previous value for default_authentication_plugin,
# this will increase compatibility with older clients. For background, see:
# https://dev.mysql.com/doc/refman/8.0/en/server-system-variables.html#sysvar_default_authentication_plugin
# default-authentication-plugin=mysql_native_password
#skip-grant-tables

datadir         = /var/lib/mysql

log-error       = /var/log/mysqld.log
pid-file        = /run/mysqld/mysqld.pid

# added
secure-file-priv = "/home/archie/"

#第七天

front-back-end-mysql-framework

图示为项目架构:

  1. 前端部分:通过 Vue 将 HTML 与 JS 绑定
  2. 前后端交互通过 axios 实现,应用 ajax 技术从后端调取数据
  3. 后端通过 MyBatis 的逆向工程获取到数据库数据
  4. 后端中,controller 负责与前端交互,mapper 负责与数据库沟通,它们之间隔着 service 层。
  5. service 层提供接口,并提出具体实现类

#第八天

一、数据的顺序

数据从数据库开始,经过后端,呈现在前端。耦合度愈来愈强,组件只依赖后面的部分(指向数据库方向),不依赖前面(指向前端方向)的部分,达到松耦合。

组成部分所起作用:

  1. html 展示数据库数据
  2. js 操作数据库,连接 controller
  3. controller 连接 js,操作 service 层,做逻辑内容(调用服务,然后返回目标数据)
  4. service 操作 mapper,给 controller 提供服务的数据
  5. domain 只是组装数据的,哪里需要去哪里
  6. resultbean 用于 controller 层,给 js 提供统一的数据格式信息
  7. mysql(表)存储数据用的
  8. 启动类:启动项目
  9. 配置文件:配置服务端口、框架等具体信息

lombok 插件的使用:

  1. 安装插件
  2. 在 maven 项目中导入插件
  3. 具体应用:
1
2
3
4
5
6
7
@Getter
@Setter
public class Resultbean<T> {
    private boolean sign;
    private String msg;
    private T data;
}

使用 lombok 可以省略大部分重复代码,节省时间。

二、写程序的顺序

  1. 页面
  2. 数据库(表:id,name,url)
  3. 程序
    1. 创建项目
    2. 搭建项目架构
    3. 工具类
    4. 逆向工程
    5. Service 层
    6. html
    7. js
    8. controller

#第九天

一、制作项目

要求:

  1. 每节课(40分钟),截图说明进度
  2. 制作流程严格按照顺序执行
  3. 遇到问题,随时提问
  4. 第一个需求:制作左侧菜单
    1. 表名:left_menu
    2. 实体类:LeftMenu
  5. 第二个需求:轮播图动态变化
    1. 功能点:
      1. 三张图片,一个数组
      2. 三个圆点显示指定顺序图片
      3. 左右各一个按钮,点击按钮可以切换图片
  6. 第三个需求:轮播图下方的四个盒子

二、总结

通过实现三个需求,熟悉写程序的顺序。第一步,根据 HTML 在数据库中加入数据;第二步,项目初始化;第三步,MyBatis 逆向工程生成 domain 下文件和 Mapper 文件;第四步,写 Service 层接口和实现类;第五步,按照 Vue 语法修改 HTML 文件;第六步,添加 axios get,then 规则;最后一步,在 controller 中添加相应部分。

课堂按照老师的要求,一个需求一个需求地实现;课下对于作业的操作,则是按照写程序的顺序,三个需求同步推进。

#第十天

重构(Refactoring):表、逆向工程、Service、html、js、controller。

重构后的旧代码,隔一段时间再删除。删除旧代码的顺序与开发顺序相反。

  1. 操作之前,要备份
  2. 先写重构代码,当重构代码能够正常运行时,再删除旧有代码。

Map 的数据结构:(Key,Value)

#收获

#day3

今天(day3)上午峰哥讲到启动 SpringBoot 时,我无法启动。错误日志通过文章和照片都能看到。

日志是分级别的,有信息、警告和错误。

我在排查错误时,先是从第一个警告开始的,直到晚上时,我才明白:应该先解决「错误」级别的问题。因为我的目的是使 Spring Boot 能够运行,而不是让输出日志看起来好看。

我从这次经历里得出的重要教训就是:区分问题的优先级很重要。希望大家能够从我的经历中获得启发。

#day4

有方向感的时候不会慌张。

#day5

今天应用了 ajax 技术,ajax 帮助网页以异步形式获取数据,亦即当网页加载完成后还能够从后端获取数据,而不需要重新加载。

#day6

今天终于解决了 MySQL 相关的报错问题,我能够跟着老师的步骤,得到期待的结果。

#day7

今天见到了这个项目的全貌,从前端到后端,从后端到数据库。

#day8

今天把过去 7 天学习的内容一次性完成,有一种纵览全局的感觉。

#day9

严格按照顺序,撰写程序是一件很舒适的事情。进行某项操作,会呈现何种结果是确定的。这就是计算机程序的逻辑。它不像人那样具备不确定性。

今天得到了老师的表扬(老师说适合当程序员),我很高兴。因为学习编程很久,受到别人的鼓励比较少,一般是自己给自己打气。

#day10

第十天对项目代码进行了重构,进而阅读了《重构》这本书。以后还要再读。

#实习总结

流程、步骤、常见问题、代码重构。