3端手游·“九牛 - 赤龍霸业”·公测
《版本简介》特色1.85·火龙|微变|专属|神器|流派|单职业，超大生态、自由交易，非常适合散人自由发展！...
2024-09-20
Vue开发实战十八：官网搭建全过程
1.3案例管理模块
1.4服务流程
1.5资讯资讯
1.6合作伙伴
1.7关于我们
1.8联系我们
1.9后台管理管理员
2.0后台体验用户
2.1体验用户只能查看没有新增、修改、删除权限
2.2官网前端数据只开首页及案例如下
点击底部的后台管理进入后台管理系统登录界面，可在关于模块动态设置是否展示
隐藏后如下
2.官网前端页面的实现
<BinnerItem :text="binnerText"></BinnerItem>
<div v-for="(item,index) in menuArr"
:key="index">
<title-item :title="item.title"></title-item>
<div v-if="item.path=='/' ">
<SiteIndexItem></SiteIndexItem>
</div>
<div v-else-if="item.path=='/example' ">
<SiteExampleItem></SiteExampleItem>
<div class="moer-btn-box">
<router-link to="/example"
class="moer-btn">更多案例展示</router-link>
</div>
</div>
<div v-else-if="item.path=='/service' ">
<SiteServiceItem></SiteServiceItem>
</div>
<div v-else-if="item.path=='/news' ">
<SiteNewsItem></SiteNewsItem>
<div class="moer-btn-box">
<router-link to="/news"
class="moer-btn">更多资讯</router-link>
</div>
</div>
<div v-else-if="item.path=='/partner' ">
<SitePartnerItem></SitePartnerItem>
</div>
<div v-else-if="item.path=='/about' ">
<SiteCompanyItem></SiteCompanyItem>
<AboutItem></AboutItem>
</div>
<div v-else-if="item.path=='/contact' ">
<SiteContactItem></SiteContactItem>
</div>
<div v-else>
</div>
</div>
菜单是否展示及数据如下
每个模块都是个组件方便在点击右上角顶部的按钮时切换到对应的组件中
官网前端运行命令yarn run serve
官网前端打包命令yarn run build
打包后生成dist文件夹等会上传到linux服务器上
3.后端管理系统页面
已案例模块为例
<template>
<div class="app-container">
<el-form :model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px">
<el-form-item label="标题"
prop="title">
<el-input v-model="queryParams.title"
placeholder="请输入标题"
clearable
size=" *** all"
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh"
size="mini"
@click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10"
class="mb8">
<el-col :span="1.5">
<el-button type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['site:example:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['site:example:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['site:example:export']">导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch"
@queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading"
:data="exampleList"
@selection-change="handleSelectionChange">
<el-table-column type="selection"
width="55"
align="center" />
<el-table-column label="标题"
align="center"
prop="title" />
<el-table-column label="分类"
align="center"
prop="type" />
<el-table-column label="内容"
align="center"
prop="content" show-overflow-tooltip />
<el-table-column label="跳转地址"
align="center"
prop="urlAddress" show-overflow-tooltip />
<el-table-column label="图片"
align="center"
prop="iconBase64" show-overflow-tooltip />
<el-table-column label="创建人"
align="center"
prop="createUser" />
<el-table-column label="是否开启0关闭;1开启"
align="center"
prop="isUse" />
<el-table-column label="是否删除0正常;1删除"
align="center"
prop="isDel" />
<el-table-column label="操作"
align="center"
class-name=" *** all-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini"
type="text"
icon="el-icon-delete"
v-hasPermi="['site:example:remove']"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改案例对话框 -->
<el-dialog :title="title"
:visible.sync="open"
width="800px"
append-to-body>
<el-form ref="form"
:model="form"
:rules="rules"
label-width="150px">
<el-form-item label="标题"
prop="title">
<el-input v-model="form.title"
placeholder="请输入标题" />
</el-form-item>
<el-form-item label="内容">
<!-- <editor v-model="form.content"
:min-height="192" /> -->
<el-input type="textarea"
:autosize="{ minRows: 2, maxRows: 8}"
placeholder="请输入内容"
v-model="form.content">
</el-input>
</el-form-item>
<el-form-item label="跳转地址"
prop="urlAddress">
<el-input v-model="form.urlAddress"
placeholder="请输入跳转地址" />
</el-form-item>
<el-form-item label="图片">
<imageUpload v-model="form.iconBase64" />
</el-form-item>
<el-form-item label="创建人"
prop="createUser">
<el-input v-model="form.createUser"
placeholder="请输入创建人" />
</el-form-item>
<el-form-item label="是否开启0关闭;1开启"
prop="isUse">
<el-input v-model="form.isUse"
placeholder="请输入是否开启0关闭;1开启" />
</el-form-item>
<el-form-item label="是否删除0正常;1删除"
prop="isDel">
<el-input v-model="form.isDel"
placeholder="请输入是否删除0正常;1删除" />
</el-form-item>
</el-form>
<div slot="footer"
class="dialog-footer">
<el-button type="primary"
@click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listExample,
getExample,
delExample,
addExample,
updateExample,
} from '@/api/site/example'
export default {
name: 'Example',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 案例表格数据
exampleList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
title: null,
},
// 表单参数
form: {},
// 表单校验
rules: {},
}
},
created() {
this.getList()
},
methods: {
/** 查询案例列表 */
getList() {
this.loading = true
listExample(this.queryParams).then((response) => {
this.exampleList = response.rows
this.total = response.total
this.loading = false
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
id: null,
title: null,
type: null,
content: null,
urlAddress: null,
iconBase64: null,
isUse: '0',
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = '添加案例'
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getExample(id).then((response) => {
this.form = response.data
this.open = true
this.title = '修改案例'
})
},
/** 提交按钮 */
submitForm() {
this.$refs['form'].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updateExample(this.form).then((response) => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addExample(this.form).then((response) => {
this.$modal.msgSuccess('新增成功')
this.open = false
this.getList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
this.$modal
.confirm('是否确认删除案例编号为"' + ids + '"的数据项？')
.then(function () {
return delExample(ids)
})
.then(() => {
this.getList()
this.$modal.msgSuccess('删除成功')
})
.catch(() => {})
},
},
}
</script>
说明：为了方便体验用户体验，因此将新增按钮及修改按钮的权限控制去除，但是后台权限还是有的，因此在页面能看到按钮，实际在调用接口方法的时候仍旧是无权限的。
后台管理页面运行命令 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<SiteExample> 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<SiteExample> list = siteExampleService.selectSiteExampleList(siteExample);
ExcelUtil<SiteExample> util = new ExcelUtil<SiteExample>(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语句如下
DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="xxx.mapper.SiteExampleMapper">
<resultMap type="SiteExample" id="SiteExampleResult">
<result property="id" column="id" />
<result property="title" column="title" />
<result property="type" column="type" />
<result property="content" column="content" />
<result property="urlAddress" column="url_address" />
<result property="iconBase64" column="icon_base64" />
<result property="iconPath" column="icon_path" />
<result property="createUser" column="create_user" />
<result property="createTime" column="create_time" />
<result property="isUse" column="is_use" />
<result property="isDel" column="is_del" />
<result property="remark1" column="remark1" />
<result property="remark2" column="remark2" />
<result property="remark3" column="remark3" />
<result property="remark4" column="remark4" />
<result property="remark5" column="remark5" />
resultMap>
<sql id="selectSiteExampleVo">
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
sql>
<select id="selectSiteExampleList" parameterType="SiteExample" resultMap="SiteExampleResult">
<include refid="selectSiteExampleVo"/>
<where>
<if test="title != null and title != ''"> and title like concat('%', #{title}, '%')if>
<if test="type != null and type != ''"> and type = #{type}if>
<if test="content != null and content != ''"> and content = #{content}if>
<if test="urlAddress != null and urlAddress != ''"> and url_address = #{urlAddress}if>
<if test="createUser != null and createUser != ''"> and create_user = #{createUser}if>
<if test="isUse != null and isUse != ''"> and is_use = #{isUse}if>
<if test="isDel != null and isDel != ''"> and is_del = #{isDel}if>
<if test="remark1 != null and remark1 != ''"> and remark1 = #{remark1}if>
<if test="remark2 != null and remark2 != ''"> and remark2 = #{remark2}if>
<if test="remark3 != null and remark3 != ''"> and remark3 = #{remark3}if>
<if test="remark4 != null and remark4 != ''"> and remark4 = #{remark4}if>
<if test="remark5 != null and remark5 != ''"> and remark5 = #{remark5}if>
where>
select>
<select id="selectSiteExampleById" parameterType="Long" resultMap="SiteExampleResult">
<include refid="selectSiteExampleVo"/>
where id = #{id}
select>
<insert id="insertSiteExample" parameterType="SiteExample" useGeneratedKeys="true" keyProperty="id">
insert into site_example
<trim prefix="(" suffix=")" suffixOverrides=",">
<if test="title != null">title,if>
<if test="type != null">type,if>
<if test="content != null">content,if>
<if test="urlAddress != null">url_address,if>
<if test="iconBase64 != null">icon_base64,if>
<if test="iconPath != null">icon_path,if>
<if test="createUser != null">create_user,if>
<if test="createTime != null">create_time,if>
<if test="isUse != null">is_use,if>
<if test="isDel != null">is_del,if>
<if test="remark1 != null">remark1,if>
<if test="remark2 != null">remark2,if>
<if test="remark3 != null">remark3,if>
<if test="remark4 != null">remark4,if>
<if test="remark5 != null">remark5,if>
trim>
<trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="title != null">#{title},if>
<if test="type != null">#{type},if>
<if test="content != null">#{content},if>
<if test="urlAddress != null">#{urlAddress},if>
<if test="iconBase64 != null">#{iconBase64},if>
<if test="iconPath != null">#{iconPath},if>
<if test="createUser != null">#{createUser},if>
<if test="createTime != null">#{createTime},if>
<if test="isUse != null">#{isUse},if>
<if test="isDel != null">#{isDel},if>
<if test="remark1 != null">#{remark1},if>
<if test="remark2 != null">#{remark2},if>
<if test="remark3 != null">#{remark3},if>
<if test="remark4 != null">#{remark4},if>
<if test="remark5 != null">#{remark5},if>
trim>
insert>
<update id="updateSiteExample" parameterType="SiteExample">
update site_example
<trim prefix="SET" suffixOverrides=",">
<if test="title != null">title = #{title},if>
<if test="type != null">type = #{type},if>
<if test="content != null">content = #{content},if>
<if test="urlAddress != null">url_address = #{urlAddress},if>
<if test="iconBase64 != null">icon_base64 = #{iconBase64},if>
<if test="iconPath != null">icon_path = #{iconPath},if>
<if test="createUser != null">create_user = #{createUser},if>
<if test="createTime != null">create_time = #{createTime},if>
<if test="isUse != null">is_use = #{isUse},if>
<if test="isDel != null">is_del = #{isDel},if>
<if test="remark1 != null">remark1 = #{remark1},if>
<if test="remark2 != null">remark2 = #{remark2},if>
<if test="remark3 != null">remark3 = #{remark3},if>
<if test="remark4 != null">remark4 = #{remark4},if>
<if test="remark5 != null">remark5 = #{remark5},if>
trim>
where id = #{id}
update>
<delete id="deleteSiteExampleById" parameterType="Long">
delete from site_example where id = #{id}
delete>
<delete id="deleteSiteExampleByIds" parameterType="String">
delete from site_example where id in
<foreach item="id" collection="array" open="(" separator="," close=")">
#{id}
foreach>
delete>
mapper>
案例的数据库如下
接口写完后我们之间用idea打包即可如下
打包成功后标识如下
然后我们去目录下找到生成的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
注：可以有偿提供类似官网及后台管理系统搭建及部署，需要的私信即可
扫一扫关注我们
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，请告知我们，本站将立刻删除涉嫌侵权内容。
相关文章
-
-
七雄争霸单机版 系统环境变量管理工具 下载
xp/win7/win8 环境搭建教程，详解542348257 2015-04首先说一下，之前因为一些特殊原因，让我恰巧的错过了些细节，但又恰巧的顺利的完...
2024-09-20
-
大魔神单职业原气晶石怎么获得 气晶石获取途径介绍
大魔神单职业是一款创造休闲开放类的沙盒形手游，游戏中玩家可以在游戏世界内自由地探索同时还能遇到各种神话怪物进行战斗，打败怪物会掉落大量玩家需要的...
2024-09-20
-
轮回乐园内部区域及特殊设备
轮回乐园是那一只蚊子创作的轻小说类小说,起点中文网提供轮回乐园部分章节免费在线阅读,此外还提供轮回乐园最新章节在线阅读。起点中文网为您创造轮回乐园无广告、无弹窗...
2024-09-20
-
TT语音app官方版本下载 v6.36.1-17664 安卓版
TT语音app官方版是一款年轻人都在用的语音社交软件。用户可以在这里与朋友们进行语音聊天，分享自己的生活和感受。同时，还可以通过语音直播、游戏社交等功能...
2024-09-20
-
城市里的欧派兑换码大全 最新礼包码cdk汇总
城市里的欧派兑换码有哪些？可能很多玩家对于这个兑换码还不太清楚，下面就让九游小编为大家带来，城市里的欧派最新礼包码cdk汇总。 城市里的欧派兑...
2024-09-20
热评文章
2022年专属火龙之神途新版
1.80龙神合击传奇
1.76永恒小极品+5复古传奇
1.76双倍魔天大极品第三季单职业
1.76神梦传奇三职业
1.80聖统圣统合击三职业传奇