为你,千千万万遍
Vue+laravel博客开发实战(web建站流程)

寒假期间在家里,尝试从0开始不用模板手搓个人博客,这里是一些过程记录,以及最终结果展示。不过还是用hexo 的yilia快速方便。

服务器环境搭建

1.安装apache2.4

Ubuntu服务器安装apache比较简单,直接aptget就可以。这里选择apache之后加ssl的时候踩雷,因为一直习惯用apache ,所以搭博客也用的apache,但是加ssl证书的时候搜教程发现绝大多数教程都是nginx,于是配的非常痛苦。以及有时间一定要了解一下宝塔服务器面板,据说很好用。

1
2
sudo apt update
sudo apt install apache2

2.安装php

众所周知php是世界上最好的编程语言。面试的时候跟面试官说我的后端是用php写的,面试官漏出了意味深长的表情。但由于后端和数据库可视化界面都是用的php所以这边还是接着按习惯走。

1
sudo apt install php libapache2-mod-php php-mysql

3.PHPmyadmin

1
2
3
sudo apt install phpmyadmin
sudo phpenmod mbstring
sudo systemctl restart apache2

正常安装phpmyadmin之后重启apache。之后就可以通过http://ip/phpmyadmin直接看数据库可视化界面了。作为初学者,看见可视化界面才慢慢一点一点入门数据库,所以每次安装数据库都会安装可视化界面。

4.laravel

1
2
sudo apt install composer
composer global require laravel/installer

安装laravel之前要先安装composer。

然后用composer创建一个新的laravel项目。

1
php artisan make:controller Api/xunfeitrans

用这个指令新建路由,并且在route.php中修改路由,之后再去/app/Httpd/Controller/API/xunfeitrans.php中写相应函数。当时学习如何写一个api学了很久,不知道为什么查到的laravel api路由教程要么不适用,要么不详细。

1
php artisan serve --host=0.0.0.0 --port=8008

一定要配置host否则无法公网访问。

5.配置ftp服务器

1
sudo apt install vsftpd

安装完之后要修改config以及加入用户组。之前做过一个通过ftp把摄像头拍摄内容上传的到服务器上的一个项目,之后就习惯用ftp修改项目的内容。本地下载好autoftp之后就可以很方便的连接ftp服务器,然后更新文件内容。

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
# Example config file /etc/vsftpd.conf

# #

# # The default compiled in settings are fairly paranoid. This sample file

# # loosens things up a bit, to make the ftp daemon more usable.

# # Please see vsftpd.conf.5 for all compiled in defaults.

# #

# # READ THIS: This example file is NOT an exhaustive list of vsftpd options.

# # Please read the vsftpd.conf.5 manual page to get a full idea of vsftpd's

# # capabilities.

# #

# #

# # Run standalone? vsftpd can run either from an inetd or as a standalone

# # daemon started from an initscript.

listen=NO

# #

# # This directive enables listening on IPv6 sockets. By default, listening

# # on the IPv6 "any" address (::) will accept connections from both IPv6

# # and IPv4 clients. It is not necessary to listen on *both* IPv4 and IPv6

# # sockets. If you want that (perhaps because you want to listen on specific

# # addresses) then you must run two copies of vsftpd with two configuration

# # files.

listen_ipv6=YES

# #

# # Allow anonymous FTP? (Disabled by default).

anonymous_enable=NO

# #

# # Uncomment this to allow local users to log in.

local_enable=YES

# #

# # Uncomment this to enable any form of FTP write command.

write_enable=YES

# #

# # Default umask for local users is 077. You may wish to change this to 022,

# # if your users expect that (022 is used by most other ftpd's)

local_umask=022

# #

# # Uncomment this to allow the anonymous FTP user to upload files. This only

# # has an effect if the above global write enable is activated. Also, you will

# # obviously need to create a directory writable by the FTP user.

anon_upload_enable=YES

# #

# # Uncomment this if you want the anonymous FTP user to be able to create

# # new directories.

anon_mkdir_write_enable=YES

# #

# # Activate directory messages - messages given to remote users when they

# # go into a certain directory.

dirmessage_enable=YES

# #

# # If enabled, vsftpd will display directory listings with the time

# # in your local time zone. The default is to display GMT. The

# # times returned by the MDTM FTP command are also affected by this

# # option.

use_localtime=YES

# #

# # Activate logging of uploads/downloads.

xferlog_enable=YES

# #

# # Make sure PORT transfer connections originate from port 20 (ftp-data).

connect_from_port_20=YES

# #

# # If you want, you can arrange for uploaded anonymous files to be owned by

# # a different user. Note! Using "root" for uploaded files is not

# # recommended!

chown_uploads=YES

# #chown_username=whoever

# #

# # You may override where the log file goes if you like. The default is shown

# # below.

xferlog_file=/var/log/vsftpd.log

# #

# # If you want, you can have your log file in standard ftpd xferlog format.

# # Note that the default log file location is /var/log/xferlog in this case.

# #xferlog_std_format=YES

# #

# # You may change the default value for timing out an idle session.

# #idle_session_timeout=600

# #

# # You may change the default value for timing out a data connection.

# #data_connection_timeout=120

# #

# # It is recommended that you define on your system a unique user which the

# # ftp server can use as a totally isolated and unprivileged user.

# #nopriv_user=ftpsecure

# #

# # Enable this and the server will recognise asynchronous ABOR requests. Not

# # recommended for security (the code is non-trivial). Not enabling it,

# # however, may confuse older FTP clients.

# #async_abor_enable=YES

# #

# # By default the server will pretend to allow ASCII mode but in fact ignore

# # the request. Turn on the below options to have the server actually do ASCII

# # mangling on files when in ASCII mode.

# # Beware that on some FTP servers, ASCII support allows a denial of service

# # attack (DoS) via the command "SIZE /big/file" in ASCII mode. vsftpd

# # predicted this attack and has always been safe, reporting the size of the

# # raw file.

# # ASCII mangling is a horrible feature of the protocol.

ascii_upload_enable=YES
ascii_download_enable=YES

# #

# # You may fully customise the login banner string:

# #ftpd_banner=Welcome to blah FTP service.

# #

# # You may specify a file of disallowed anonymous e-mail addresses. Apparently

# # useful for combatting certain DoS attacks.

# #deny_email_enable=YES

# # (default follows)

# #banned_email_file=/etc/vsftpd.banned_emails

# #

# # You may restrict local users to their home directories. See the FAQ for

# # the possible risks in this before using chroot_local_user or

# # chroot_list_enable below.

#chroot_local_user=YES

# #

# # You may specify an explicit list of local users to chroot() to their home

# # directory. If chroot_local_user is YES, then this list becomes a list of

# # users to NOT chroot().

# # (Warning! chroot'ing can be very dangerous. If using chroot, make sure that

# # the user does not have write access to the top level directory within the

# # chroot)

# chroot_local_user=YES

# chroot_list_enable=YES

# # (default follows)

# chroot_list_file=/etc/vsftpd.chroot_list

# #

# # You may activate the "-R" option to the builtin ls. This is disabled by

# # default to avoid remote users being able to cause excessive I/O on large

# # sites. However, some broken FTP clients such as "ncftp" and "mirror" assume

# # the presence of the "-R" option, so there is a strong case for enabling it.

ls_recurse_enable=YES

# #

# # Customization

# #

# # Some of vsftpd's settings don't fit the filesystem layout by

# # default.

# #

# # This option should be the name of a directory which is empty. Also, the

# # directory should not be writable by the ftp user. This directory is used

# # as a secure chroot() jail at times vsftpd does not require filesystem

# # access.

secure_chroot_dir=/var/run/vsftpd/empty

# #

# # This string is the name of the PAM service vsftpd will use.

pam_service_name=vsftpd

# #

# # This option specifies the location of the RSA certificate to use for SSL

# # encrypted connections.

rsa_cert_file=/etc/ssl/certs/ssl-cert-snakeoil.pem
rsa_private_key_file=/etc/ssl/private/ssl-cert-snakeoil.key
ssl_enable=NO
#

# #

# # Uncomment this to indicate that vsftpd use a utf8 filesystem.

utf8_filesystem=YES

这里是ftp的配置文件,每次安装ftp都要被配置文件纠缠呜呜呜。

vue3

因为之前就下好npm 所以安装vue配置什么的就比较顺利。但必要提到的是,vue3的默认安装是不加route之类 的文件结构的,所以安装的时候一定要主动勾选,否则文件树不全。

最后修修改改就是这个样子了。

image-20240312142404483

image-20240312142510717

​ 点开文章列表,就是每个文章的md展示。文章是存储在服务器后端数据库的,每次都是请求得到列表的大概内容。点开文章,会再次向后端请求,当时觉得写静态网页没什么技术含量,而且css代码好难写,就写的动态网页然后vue里装了个md插件。

image-20240312144601640

​ 很简陋,但是体验了一把全栈的工程,以及一个博客从0到50%的工作量。前端和后端都写了一段时间,把整个流程都体验了一遍。比较大的收获是对vue3更加了解了,以及一直想加的博客宠物,真的去找的时候,才发现只是素材问题,去github上面逛一圈什么都有了。

web建站 vue 3 PHP laravel
Hello World
© 2020 Gina
Powered by hexo | Theme is blank
Title - Artist
0:00