1.前言

千呼万唤始出来，经过前几章的准备，我们已经可以引入前端界面了。项目终于可以看到界面了，不容易啊！同学们可以在码云上搜索Pear Admin Layui，下载后备用，这是我们的前端仓库，项目中所用到的界面元素都会从里面慢慢的抽出来，引入到项目中。

2.查看前端页面

将下载好的Pear Admin Layui项目，用Visual Studio Code(简称 VSCode)打开，点击选中index.html并点击鼠标右键选择Open with Live Server,启动前端项目查看页面。

Open with Live Server是启动本地服务器，具有静态的实时重载功能。打开vscode扩展，搜索Live Server，然后在右侧页面点击安装即可。同学们可以查看该项目详情。

3. 引入页面

本次项目采用前后端不分离模式开发。因此首先需要对项目前端做下明确的分割。

首先前端采用Iframe方式，内容页是iframe承载的子页面，顶部和左侧是固定不变的。我们的每一个页面请求都会刷新内容页。当然实现内容页刷新的方式有iframe和ajax方式。鉴于本次使用的.net6 mvc方式，因此使用iframe方式相对简单一点。

3.1 创建Home页

如下图：Views/Home/Index.cshtml可作为我们的基础页面，后续所有的内容页均是该页面内的一个iframe项。

打开Pear Admin Layui项目，复制如下文件到本项目中。如下图，对标复制即可

然后开始修改页面已适配本项目。由于Index.cshtml作为项目基础页，因此该页面可不继承任何母版页。

打开复制的Index.cshtml页面，按照如下图3处修改即可。其中1处表示是不继承任何母版页，2,3表示引入的样式css文件和js文件，这需要根据您的css和js存放位置修改。

敲黑板 ！！！

很重要：找到页面最下方，如图修改为json和json文件的路径。接下来就可以修改对应json文件内容。

同样按照您实际的存放位置，准确地修改文件指向路径。

至此，大功告成！！！[给力]

3.2项目启动

好了，至此重新生成并启动项目吧。什么？内容页不显示，不要在意细节，都会有的。因为我们就没有移植内容页，仅仅是移植了基础页。

4.结语

本章比较简单，我们仅仅移植了一个基础的home页，下一章我们继续移植，从登录开始，项目中有用到的技术我们一点点添加。各位同学在阅读实践过程中有看不懂或有其他想法的可以在评论区留言或者私信。教程有帮助的话请各位同学帮忙评论点赞关注三连，感谢大家！

----------------------------------------------------

私信： 校园图书管理系统 可以获取Gitee的链接