Vue开发实战十八：官网搭建全过程

文章目录

1.最终效果图1.1轮播图1.2首页1.3案例管理模块1.4服务流程1.5新闻资讯1.6合作伙伴1.7关于我们1.8联系我们1.9后台管理管理员2.0后台体验用户2.1体验用户只能查看没有新增、修改、删除权限2.2官网前端数据只开首页及案例如下

2.官网前端页面的实现3.后端管理系统页面4.后台接口的实现5.Linux服务器上传文件及配置启动6.Nginx的配置

本来打算写个七八篇做一个官网搭建的系列，之前写过一篇十七新闻资讯的实现，后来的模块和之前的基本类似就不在重复，这篇文章从前后端到服务器，详细介绍下官网搭建的全过程。

1.最终效果图

官网数据及权限全开展示

1.1轮播图

1.2首页

1.3案例管理模块

1.4服务流程

1.5新闻资讯

1.6合作伙伴

1.7关于我们

1.8联系我们

1.9后台管理管理员

2.0后台体验用户

2.1体验用户只能查看没有新增、修改、删除权限

2.2官网前端数据只开首页及案例如下

点击底部的后台管理进入后台管理系统登录界面，可在关于模块动态设置是否展示

隐藏后如下

2.官网前端页面的实现

菜单是否展示及数据如下

每个模块都是个组件方便在点击右上角顶部的按钮时切换到对应的组件中

官网前端运行命令yarn run serve 官网前端打包命令yarn run build 打包后生成dist文件夹等会上传到linux服务器上

3.后端管理系统页面

已案例模块为例

说明：为了方便体验用户体验，因此将新增按钮及修改按钮的权限控制去除，但是后台权限还是有的，因此在页面能看到按钮，实际在调用接口方法的时候仍旧是无权限的。

后台管理页面运行命令 npm run dev 后台管理页面打包命令 npm run build:prod 最终也是生成dist文件，一会我们也会放到服务器上

4.后台接口的实现

以案例模块为例

package xxx.controller;

......

/**

* 案例Controller

*

* @author yingch

* @date 2022-03-10

*/

@RestController

@RequestMapping("/site/example")

public class SiteExampleController extends BaseController

{

@Autowired

private ISiteExampleService siteExampleService;

/**

* 查询案例列表

*/

@GetMapping("/list")

public TableDataInfo list(SiteExample siteExample)

{

startPage();

List list = siteExampleService.selectSiteExampleList(siteExample);

return getDataTable(list);

}

/**

* 导出案例列表

*/

@PreAuthorize("@ss.hasPermi('site:example:export')")

@Log(title = "案例", businessType = BusinessType.EXPORT)

@PostMapping("/export")

public void export(HttpServletResponse response, SiteExample siteExample)

{

List list = siteExampleService.selectSiteExampleList(siteExample);

ExcelUtil util = new ExcelUtil(SiteExample.class);

util.exportExcel(response, list, "案例数据");

}

/**

* 获取案例详细信息

*/

@GetMapping(value = "/{id}")

public AjaxResult getInfo(@PathVariable("id") Long id)

{

return AjaxResult.success(siteExampleService.selectSiteExampleById(id));

}

/**

* 新增案例

*/

@PreAuthorize("@ss.hasPermi('site:example:add')")

@Log(title = "案例", businessType = BusinessType.INSERT)

@PostMapping

public AjaxResult add(@RequestBody SiteExample siteExample)

{

return toAjax(siteExampleService.insertSiteExample(siteExample));

}

/**

* 修改案例

*/

@PreAuthorize("@ss.hasPermi('site:example:edit')")

@Log(title = "案例", businessType = BusinessType.UPDATE)

@PutMapping

public AjaxResult edit(@RequestBody SiteExample siteExample)

{

return toAjax(siteExampleService.updateSiteExample(siteExample));

}

/**

* 删除案例

*/

@PreAuthorize("@ss.hasPermi('site:example:remove')")

@Log(title = "案例", businessType = BusinessType.DELETE)

@DeleteMapping("/{ids}")

public AjaxResult remove(@PathVariable Long[] ids)

{

return toAjax(siteExampleService.deleteSiteExampleByIds(ids));

}

}

xml中sql语句如下

PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

select id, title, type, content, url_address, icon_base64, icon_path, create_user, create_time, is_use, is_del, remark1, remark2, remark3, remark4, remark5 from site_example

and title like concat('%', #{title}, '%')

and type = #{type}

and content = #{content}

and url_address = #{urlAddress}

and create_user = #{createUser}

and is_use = #{isUse}

and is_del = #{isDel}

and remark1 = #{remark1}

and remark2 = #{remark2}

and remark3 = #{remark3}

and remark4 = #{remark4}

and remark5 = #{remark5}

where id = #{id}

insert into site_example

title,

type,

content,

url_address,

icon_base64,

icon_path,

create_user,

create_time,

is_use,

is_del,

remark1,

remark2,

remark3,

remark4,

remark5,

#{title},

#{type},

#{content},

#{urlAddress},

#{iconBase64},

#{iconPath},

#{createUser},

#{createTime},

#{isUse},

#{isDel},

#{remark1},

#{remark2},

#{remark3},

#{remark4},

#{remark5},

update site_example

title = #{title},

type = #{type},

content = #{content},

url_address = #{urlAddress},

icon_base64 = #{iconBase64},

icon_path = #{iconPath},

create_user = #{createUser},

create_time = #{createTime},

is_use = #{isUse},

is_del = #{isDel},

remark1 = #{remark1},

remark2 = #{remark2},

remark3 = #{remark3},

remark4 = #{remark4},

remark5 = #{remark5},

where id = #{id}

delete from site_example where id = #{id}

delete from site_example where id in

#{id}

案例的数据库如下

接口写完后我们之间用idea打包即可如下

打包成功后标识如下

然后我们去target目录下找到生成的jar文件重命名下等待一会上传服务器

5.Linux服务器上传文件及配置启动

默认linux已经搭建好java环境并配置好项目环境了，如果没配置可以参考下我的这篇文章《Linux搭建后台管理系统》，将之前打包好的两个dist文件分别放到下面的目录中，将jar包放到jar目录下

注意dist文件的替换不需要重启nginx也不需要其他多余的操作，直接替换就行，jar的替换需要杀死进程并重启，命令如下

#jar进程查看 8080为项目端口号：

netstat -nlp|grep 8080

#或者用：

ps -ef|grep java

#进程关闭 23568为进程查看得到的进程号

kill 23568

#jar包启动

nohup java -jar xx.jar &

6.Nginx的配置

官网前端Nginx配置如下

官网后台管理页面配置如下

注意：监听的端口，我默认的80端口作为官网的访问，那我的服务器绑定域名后，用户可以直接通过域名不加端口访问，后端管理页面则必通过域名+8001端口访问才行，由于我的官网是从之前php搭建的转到vue来的，因此在官网的配置中还能看index.php的文件，实际上就是访问dist文件下的index.html

注：可以有偿提供类似官网及后台管理系统搭建及部署，需要的私信即可