B.4创建index.html 文件

SpringMVC项目配置与JSP开发初体验
本文介绍了如何在Spring Tool Suite中创建一个包含index.html的SpringMVC项目,并进行了项目更新和服务器配置。通过添加和移除应用到Tomcat服务器,可以在浏览器中访问到index.html的内容。接着,作者创建了一个JSP文件indexUseJsp.jsp,展示了使用JSP作为视图引擎的简单操作。尽管官方文档提到了视图技术配置,但本文表明即使不配置也能进行JSP开发。作者计划进一步学习JSTL,并鼓励新手一起进步。

要完成示例程序,需要创建一个index.html文件,位置保存在 src/main/webapp下。 

 

<!DOCTYPE html>
<html>
<body>

<h1>My First Spring MVC app</h1>

<p>My first  Spring MVC app Create by SpringToolSuite and Maven.</p>

</body>
</html>

完成了B.4。

B.5 更新项目

选择项目,右键 单击Maven> Update Project .

完成了。

如果不做这个步骤,会发现项目前面有个错误。更新了就没有了。 

下面是我自己写的,运行这个项目,访问我们的index.html

到server中添加这个应用:点击server中tomcat,右键> Add and Remove 

 

打开浏览器,输入地址:http://localhost:8080/SpringToolSuiteCreateSpringMVCwithMave/

你会看到index.html文件的内容。我的应用名字有点太长了,希望您的写的短一点,别这么费劲。

下面新建一个jsp来试试。

新建一个jsp文件,文件名叫:indexUseJsp.jsp 内容和html文件内容差不多,

地址栏输入:http://localhost:8080/SpringToolSuiteCreateSpringMVCwithMave/indexUseJsp.jsp

这样就完成了一个开发环境的搭建。

其实不用spring,开发jsp特别好开发,废了这么大的力气,无非是要使用Spring框架而已。

因此,本文和上一篇博客,把用SpringToolSuite 创建SpirngMVC应用,采用JSP作为视图引擎,这个事情解决了。

小伙伴们可以愉快地开发了。

官方文档说的是对的,就是视图技术中关于jsp的那一段

说要这样子配置一下啊,最佳实践啊,什么的,无所谓的,本文没有用到也可以进行jsp开发和学习。

<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
    <property name="prefix" value="/WEB-INF/jsp/"/>
    <property name="suffix" value=".jsp"/>
</bean>

也就是说没有配置这个 viewResolver,以后学的更多也许就明白了。

我要去学习JSTL,标签库什么的 ,博文结束,菜鸟欢迎关注,一起进步。

 

<think>好的,用户想了解如何运行包含App.vue和index.html的Vue项目。我需要先回忆一下Vue项目的基本结构。通常,Vue项目的主入口是index.html,它里面有一个div作为挂载点,比如<div id="app"></div>。然后,main.js是JavaScript的入口文件,负责初始化Vue实例,并将App.vue组件挂载到index.html中的那个div上。 用户可能已经通过webpack或Vue CLI创建项目,所以需要先确认他们是否安装了必要的依赖,比如Node.js和npm。如果用户没有安装,运行项目时会报错,所以第一步应该是检查环境。接下来,他们可能需要使用npm install来安装依赖包,然后通过npm run dev或npm run serve来启动开发服务器。 另外,用户提供的引用内容提到,index.html中的内容在页面加载瞬间会显示,之后被App.vue替换。这可能涉及到Vue的挂载过程,需要解释清楚这个过程。用户可能对Vue项目的构建和运行流程不太熟悉,所以需要分步骤说明,确保他们能理解每个文件的作用和执行的顺序。 还要注意,用户可能遇到的问题,比如依赖安装失败、端口占用或者构建错误,应该给出常见问题的解决方法。例如,建议检查Node.js版本,或者使用不同的端口运行项目。此外,如果用户使用的是Vue CLI创建项目,可能需要强调vue-cli-service的作用,以及如何通过配置文件调整构建选项。 后,生成相关问题时要考虑用户可能进一步想了解的内容,比如如何配置webpack、如何部署项目,或者如何添加新组件,这些都可以作为相关问题提出,帮助用户深入学习。</think>要运行包含 $App.vue$ 和 $index.html$ 的 Vue 项目,需要按照以下步骤操作: ### 一、环境准备 1. 安装 Node.js(含 npm) - 低要求版本:Node.js v14+,npm v6+ - 验证安装:终端执行 `node -v` 和 `npm -v` 2. 安装 Vue CLI(脚手架工具) ```bash npm install -g @vue/cli ``` ### 二、项目启动流程 ```mermaid graph TD A[index.html] --> B[main.js] B --> C[App.vue] C --> D[组件树] ``` 1. **入口文件加载** 浏览器首先加载 $index.html$,其中定义的空容器 `<div id="app"></div>` 将成为 Vue 应用的挂载点[^2] 2. **JavaScript 入口** $main.js$ 创建 Vue 实例并挂载到 DOM: ```javascript import Vue from 'vue' import App from './App.vue' new Vue({ render: h => h(App), }).$mount('#app') ``` 3. **根组件渲染** $App.vue$ 作为根组件,通过单文件组件(SFC)格式组织模板、逻辑和样式: ```vue <template> <div id="app"> <h1>{{ message }}</h1> </div> </template> <script> export default { data() { return { message: 'Hello Vue!' } } } </script> ``` ### 三、运行命令 1. 安装依赖 ```bash npm install ``` 2. 启动开发服务器 ```bash npm run serve ``` - 默认访问地址:http://localhost:8080 - 热重载:修改文件后自动刷新 3. 生产环境构建 ```bash npm run build ``` - 生成 `/dist` 目录包含优化后的静态文件 ### 四、常见问题排查 | 问题现象 | 解决方法 | |---------|----------| | 空白页面 | 检查浏览器控制台错误 | | 依赖安装失败 | 清除缓存后重试:`npm cache clean --force` | | 端口冲突 | 修改启动命令:`npm run serve -- --port 3000` | ### 五、运行机制说明 当浏览器加载时: 1. 初始显示 $index.html$ 原始内容(若有) 2. Vue 实例完成挂载后,用 $App.vue$ 的模板替换 `<div id="app">` 内容[^2] 3. 通过虚拟 DOM 实现动态更新
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值