vue 学习小结（3）关于‘Splan‘

╰+攻爆jí腚メ 2022-11-14 10:23 81阅读 0赞

# 背景 #

利用vue 以及 py服务端，实现共享计划本（Splan），利用vue的mui，进行简单美化。  
[vue 学习小结（1）关于v-for][vue _1_v-for]  
[vue 学习小结（2）关于‘Splan‘][vue _2_Splan]

# 1.卡片模式 #

<div id="app">
    	<div class="mui-content" v-for="item in info">
    		<div class="mui-card">
    			<div class="mui-card-header mui-card-media">
    				<img src="images/logo.png" />
    				<div class="mui-media-body">
    					{
       {item.username}}
    					<p>发表于 {
       {item.date}}</p>
    				</div>
    				
    			</div>
    			<div class="mui-card-content" >
    				<div class="mui-card-content-inner">
    					{
       {item.plan}}
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70]

# 2.底部工具栏 #

利用nav进行简单的底部工具栏设置。

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 1]  
同时配置简单的js，vue底部工具栏封装严格，利用以下js实现页面简单跳转。

# 3.其余页面 #

新建html，input.html（上传计划），login.html（登录）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 2]  
效果，具体页面逻辑未完成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 4]

[vue _1_v-for]: https://zolty.blog.csdn.net/article/details/115268624
[vue _2_Splan]: https://zolty.blog.csdn.net/article/details/115271161
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70]: /images/20221022/3d3b1b1170b244f296d861f3881324de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210328204259863.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210328204728744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210328204714484.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210328204827934.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70